Foundations
Accessibility
Rig targets WCAG 2.2 AA and follows the WAI-ARIA Authoring Practices. Every component page lists its role, keyboard model and the success criteria it meets. The ratios below are computed from the actual colour values.
Standards and targets
| Area | Standard | In practice |
|---|---|---|
| WCAG 2.2 | AA | Every page and every component example |
| WAI-ARIA Authoring Practices | Patterns | Tabs, menu button, dialog, disclosure, switch, slider, radio group, tooltip, breadcrumb |
| Target size | WCAG 2.5.8 (24px) and Rig minimum 44px | Small controls keep a 44px halo on touch |
| Focus | WCAG 2.4.7, 2.4.11 | 2px ring, 2px offset, 3:1 against both neighbours |
| Motion | WCAG 2.2.2, prefers-reduced-motion | Every animation stops or shortens; a Pause motion control sits in the footer |
| Forced colours | Windows High Contrast | Controls draw a system border and focus ring |
| Reflow | WCAG 1.4.10 | Pages work at 320px wide and 400% zoom without two-direction scrolling |
Text contrast
Colours as used in this documentation. Filled buttons use darker stops than the Figma 500 tokens so that white labels reach 4.5:1.
| Pair | Colours | Ratio | Needs | Result | Note |
|---|---|---|---|---|---|
| Primary button label | #FFFFFF on #4A54FF | 5.25:1 | 4.5:1 | Pass | Lightest stop of the gradient |
| Secondary button label | #FFFFFF on #7C3AED | 5.7:1 | 4.5:1 | Pass | Purple 500 |
| Success button label | #FFFFFF on #047857 | 5.48:1 | 4.5:1 | Pass | Emerald 700, not 500 |
| Error button label | #FFFFFF on #DC2626 | 4.83:1 | 4.5:1 | Pass | Red 600, not 500 |
| Info badge label | #FFFFFF on #2563EB | 5.17:1 | 4.5:1 | Pass | Blue 600, not 500 |
| Warning badge label | #2A1700 on #F59E0B | 8.01:1 | 4.5:1 | Pass | Dark text on amber |
| Body text, dark | #B6BFD6 on #0A0E1A | 10.46:1 | 4.5:1 | Pass | |
| Muted text, dark | #8E9AB8 on #0E1322 | 6.58:1 | 4.5:1 | Pass | |
| Body text, light | #333842 on #FFFFFF | 11.76:1 | 4.5:1 | Pass | |
| Muted text, light | #595E66 on #FFFFFF | 6.53:1 | 4.5:1 | Pass | |
| Link, dark | #969CFF on #0A0E1A | 7.79:1 | 4.5:1 | Pass | |
| Link, light | #3D45D1 on #FFFFFF | 7.07:1 | 4.5:1 | Pass | |
| Success text, light | #047857 on #F6F7FB | 5.12:1 | 4.5:1 | Pass | |
| Error text, light | #B91C1C on #F6F7FB | 6.04:1 | 4.5:1 | Pass |
Non-text contrast
| Pair | Colours | Ratio | Needs | Result | Note |
|---|---|---|---|---|---|
| Focus ring, dark | #969CFF on #0A0E1A | 7.79:1 | 3:1 | Pass | 2px, offset 2px |
| Focus ring, light | #3D45D1 on #FFFFFF | 7.07:1 | 3:1 | Pass | 2px, offset 2px |
| Field border, dark | #7683A6 on #0E1322 | 4.91:1 | 3:1 | Pass | WCAG 1.4.11 |
| Field border, light | #7C8396 on #FFFFFF | 3.79:1 | 3:1 | Pass | WCAG 1.4.11 |
| Checkbox border, dark | #8E9AB8 on #0E1322 | 6.58:1 | 3:1 | Pass | |
| Switch track off, dark | #7683A6 on #0E1322 | 4.91:1 | 3:1 | Pass | Knob adds a second cue |
Findings in the Figma specification
These values fail as specified. They come from the Figma file (7 September 2026) and need a change in the design tokens before the product can claim AA for the affected components. This site already uses the corrected values.
| Pair | Colours | Ratio | Needs | Result | Note |
|---|---|---|---|---|---|
| Success button, white on Emerald 500 | #FFFFFF on #10B981 | 2.54:1 | 4.5:1 | Fail | Use Emerald 700 for filled buttons |
| Error button, white on Red 500 | #FFFFFF on #EF4444 | 3.76:1 | 4.5:1 | Fail | Use Red 600 or darker |
| Info badge, white on Blue 500 | #FFFFFF on #3B82F6 | 3.68:1 | 4.5:1 | Fail | Use Blue 600 |
| Primary gradient start, white on #5C65FF | #FFFFFF on #5C65FF | 4.41:1 | 4.5:1 | Fail | Do not lighten the top stop |
| Secondary gradient start, white on #9061F5 | #FFFFFF on #9061F5 | 4.03:1 | 4.5:1 | Fail | Do not lighten the top stop |
| text/hint on white | #949CA8 on #FFFFFF | 2.77:1 | 4.5:1 | Fail | Helper text must use a darker slate |
| text/field-label on white | #8C91A1 on #FFFFFF | 3.14:1 | 4.5:1 | Fail | Labels need at least Slate 500 |
| text/overline on white | #808591 on #FFFFFF | 3.7:1 | 4.5:1 | Fail | |
| Field border Slate 200 on white | #E1E4EF on #FFFFFF | 1.27:1 | 3:1 | Fail | Boundary of a control must reach 3:1 |
How it was checked
- Every example page was audited in Chrome for text contrast (including gradient stops), accessible names, target size, duplicate ids and heading order, in dark and light themes.
- Keyboard paths were exercised for tabs, menu, dialog, popover, tooltip and toast.
- An audit with a screen reader and with browser zoom at 400% is still to be done by a person.