Foundations
Accessibility
Accessibility is a requirement checked before ship, not a follow-up pass. Every token pair below is measured against the WCAG AA thresholds — 4.5:1 for normal text, 3:1 for large text (18pt+/24px+ regular, or 14pt+/18.7px+ bold).
Verified contrast pairs
Text17.4:1 · AA
Text secondary6.7:1 · AA
Text muted5.2:1 · AA
Button text12.6:1 · AA
Success text9.8:1 · AA
Warning text7.7:1 · AA
Error text6.4:1 · AA
Info text6.7:1 · AA
Rules
| Rule | Detail |
|---|---|
| Keyboard | Every interactive element is reachable and operable with Tab, Shift+Tab, Enter, and Space alone — no mouse-only interactions. |
| Focus visibility | A visible focus ring on every focusable element — never removed with outline: none without an equally visible replacement. |
| Labels | Every form control and icon-only button has an accessible name (a <label>, aria-label, or equivalent). |
| Colour is never the only signal | Status is shown with an icon or label in addition to colour — never colour alone (e.g. red text with no icon). |
| Motion | Every animation respects prefers-reduced-motion (see Foundations → Motion). |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug accessibility to manage the usage rules above from the CMS.