Accessibility standards

Quick reference for WCAG 2.1 AA compliance in Enable Amazing components.

For the full specification, see ACCESSIBILITY.md.

Key numbers

Requirement	Value	WCAG Criterion
Normal text contrast	4.5:1 minimum	SC 1.4.3
Large text contrast	3:1 minimum	SC 1.4.3
UI component contrast	3:1 minimum	SC 1.4.11
Minimum body font size	16px (1rem)	Best practice
Body text line height	1.5 minimum	Best practice
Touch target size (minimum)	24x24 CSS pixels	SC 2.5.8
Touch target size (recommended)	44x44 CSS pixels	Best practice
Focus indicator	2px outline, 3:1 contrast	SC 2.4.7
Text resizing	Up to 200% without loss	SC 1.4.4

Large text = 18pt (24px) regular or 14pt (~18.66px) bold.

Component checklist

Use this checklist when building or reviewing components:

Visual

Colour contrast meets 4.5:1 for normal text and 3:1 for large text
Non-text contrast meets 3:1 for UI components
Focus indicator is visible with 3:1 contrast
Information isn't conveyed by colour alone
Text uses rem units and is readable at 200% zoom

Interaction

All functionality is keyboard accessible
No keyboard traps exist
Focus order follows logical reading order
Touch targets are at least 24x24 CSS pixels
Interactive states are visually distinguishable

Semantics

Uses native HTML elements where possible
ARIA roles and properties are correct (if used)
All form inputs have associated labels
Heading hierarchy is maintained
Dynamic content changes are announced to screen readers

Testing

Passes axe-core automated testing (zero violations)
Passes eslint-plugin-jsx-a11y rules
Keyboard-only navigation verified
Screen reader tested (VoiceOver at minimum)
Storybook a11y addon shows no violations

How we test

The design system includes 3 layers of automated accessibility testing:

Layer	Tool	When it runs
Linting	`eslint-plugin-jsx-a11y`	Development time
Unit testing	`axe-core` via Vitest	Test time (`pnpm test`)
Visual testing	`@storybook/addon-a11y`	Storybook (a11y panel)

Automated tools catch roughly 30-40% of accessibility issues. Always combine with manual keyboard and screen reader testing.

Resources

ACCESSIBILITY.md. Full accessibility standards document
WCAG 2.1 Quick Reference
WAI-ARIA Authoring Practices
WebAIM