Foundations
Accessibility
Contrast, keyboard, screen readers, touch targets.
| Area | The rule |
|---|
| Contrast | Body text 4.5:1, large text and UI parts 3:1, in both themes (Color has the live check). |
| Keyboard | Everything works with the keyboard alone; focus rings stay (focus-visible:ring-2 ring-ring). |
| Targets | A page’s main actions are at least 44px (Button size lg, ChoiceGroup size lg); nothing interactive is under 32px. |
| Semantics | Real buttons and links; ChoiceGroup is a radiogroup, Chip says aria-pressed; one h1 per page; headings in order. |
| Not color alone | Status chips have words; StrengthTag shows the number; odds bars have labels. |
| Motion | Everything honors prefers-reduced-motion. |
| Live updates | Play’s announcer and the speed line are aria-live; hidden dice are labeled “Hidden die”. |
| Zoom | Layouts reflow at 200% zoom with no sideways scroll. |
Focus ringTab to any control to see it