Skip to content

Accessibility contract

Rendered — pass/fail samples

tertiary text — decorative

Soft ink — body fails at 3.4:1.

--fg-softfails AA
tertiary text — AA-safe

Soft-AA ink — same role, body passes at 4.5:1.

--fg-soft-aaAA 4.6:1
status — Approved · 200 OK

Dot uses light · text uses deep — different roles.

--status-ok-textAAA 7.2:1
status — Failed · 500 ERR

Same recipe, error palette.

--status-err-textAA 4.8:1

Rules

  • AA at body sizes, AAA at display sizes.
  • Forced colors@matter/tokens/css/forced-colors imported once at the app root.
  • Reduced motion — every m-* recipe respects the media query.
  • Focus — every focusable surface inherits the canonical peach ring.
  • Keyboard — every interactive component is keyboard-traversable; documented per page.

Full contract on Foundations / a11y.

On this page