Design System / Practice / Accessibility

Accessibility

We protect the people most vulnerable to exposure. That starts with making the product usable for them — every surface, every state, every input.

Our pledge

WCAG 2.2 AA, always. AAA where we can.

Every component in this library is tested with keyboard-only navigation, screen readers (VoiceOver + TalkBack), and 200% zoom. If it fails, it doesn't ship.

Pillars

The four things we check, always

01 · Perceivable

Can they see it?

Contrast passes AA. Icon-only controls have a visible or aria label. Every image has alt text or is marked decorative.

02 · Operable

Can they use it?

Everything works with keyboard alone. Focus order follows visual order. Nothing relies on hover.

03 · Understandable

Does it make sense?

Labels are plain English. Errors explain what to fix. Forms don't punish correction — the error message persists until resolved.

04 · Robust

Does it work everywhere?

Semantic HTML, not divs-with-roles. ARIA only when HTML can't say it. Tested against VoiceOver, TalkBack, and JAWS.

Color contrast

Our palette, measured

Ratios for every foreground / background pair in the system. Anything less than 4.5 : 1 is flagged and can't be used for text.

Sample
Token pair
Ratio
Normal
Large
Default text
fg-default / bg-default
16.1 : 1
AAA
AAA
Muted text
fg-muted / bg-default
7.4 : 1
AAA
AAA
Subtle text
fg-subtle / bg-default
4.7 : 1
AA
AAA
Inverse
fg-inverse / bg-inverse
16.1 : 1
AAA
AAA
Accent · white
#FFF / accent-primary
4.6 : 1
AA
AAA
On cream
fg-default / bg-cream
13.8 : 1
AAA
AAA
Focus

Visible, always

Every focusable element has a 2px accent ring with 3px offset. Never remove it — keyboard users rely on it.

Focused link 2px accent · 3px offset
Checklist

Ship-ready audit

Run through this list on every component before it lands in the library. If any item fails, it stays in draft.

✓
Keyboard-only Every interaction reachable via Tab / Shift+Tab, invokable via Enter or Space.
✓
Screen reader Tested with VoiceOver on macOS / iOS and TalkBack on Android. Labels read in the intended order.
✓
Focus trap in modals Tab cycles within the dialog; Esc closes it; focus returns to the trigger.
✓
Reduced motion Honors prefers-reduced-motion: no translates, no springs, crossfade only.
✓
Color isn't the only signal Error states pair color with icon + text. Required fields show an asterisk, not a red border alone.
✓
Hit target ≥ 44px On touch surfaces. Small visual size is fine if the hit box is padded out.
✓
Zoom to 200% No content clipped, no horizontal scroll on text reflow, no functionality lost.