Skip to content
Site volume
Colourway

Foundations

Accessibility

The floor every component stands on, how the press check proves it, and what you still have to do yourself.

  • Experimental
On this page

Legibility is the floor of Overprint (principle 1): WCAG 2.2 AA as the minimum, the APCA lookup as the target. The system carries most of the work in its tokens and components; this page lists what it guarantees and what stays with you.

What the system guarantees#

  • Contrast. Every text and surface pair is a sanctioned pair, proven in every look by the token pipeline: WCAG 4.5:1 for body text, 3:1 for large text and UI boundaries, and the APCA floor for the size and weight. No text is translucent.
  • Type floors. Nothing under 12 px, nothing meaningful under 14 px; body text is 16 to 18 px.
  • Targets. At least 24 × 24 px everywhere and 44 × 44 for primary controls on touch screens (WCAG 2.5.8).
  • Focus. A 2 px ring in the focus ink with a 2 px gap, never hidden under the sticky header or the action dock (WCAG 2.4.11, 2.4.13).
  • Meaning without colour. Lines carry letters and shapes; status carries words; errors carry a glyph and a message, never red alone (WCAG 1.4.1).
  • Two layers. No art sits between a text box and its plate, so contrast holds in every colourway (D-B1).
  • Square text. Text never tilts at rest; art may.
  • Motion. Reduced motion is honoured everywhere, loops have pause keys, nothing flashes (WCAG 2.2.2, 2.3.1).
  • Reflow and spacing. Components hold up at 320 px and under WCAG 1.4.12 text spacing.
  • Native first. Controls are native elements; Base UI covers the patterns the platform lacks, with full keyboard support.
  • More contrast and forced colours are supported: every ink firms up one step, and every control keeps a border.

How it is proven#

The press check renders every component's fixtures in every look and runs the fifteen legibility rules and axe on each, plus screenshot comparisons. Each component page lists its keyboard map and the colour pairs it prints, with their WCAG ratio and APCA Lc.

What stays with you#

  • Words. Labels that say what happens, alt text that describes, headings in order, links that name their destination. The Content section of each component page has the rules.
  • Structure. One h1, one main, the skip link first, landmarks named only when they help.
  • Your own art and photos. Alt text for anything that carries information, and proof images left untouched.
  • Testing with people. Automated checks catch most problems, not all. Try your pages with a keyboard, a screen reader and zoom at 200 %.