Primitive 12 / Contrast grid

Accessibility contrast grid

A matrix of every approved foreground colour against every approved background. Cells carry the contrast ratio and a WCAG pass-fail badge — AAA, AA, AA for large text only, or fail.

Production answer

Accessibility contrast grid is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Accessibility contrast grid states
Generative search brief

Accessibility contrast grid: A matrix of every approved foreground colour against every approved background. Cells carry the contrast ratio and a WCAG pass-fail badge — AAA, AA, AA for large text only, or fail.

Contrast grid

WCAG pass-fail at a glance

Each cell compares a foreground colour against a background colour. The badge tells you whether the pairing passes AAA, AA, AA for large text only, or fails.

Fg \\ Bg
Canvas
Paper
Workshop red
Service amber
Telemetry
Stencil ink
18.32:1AAA
18.60:1AAA
6.41:1AA
13.20:1AAA
12.42:1AAA
Paper
17.92:1AAA
1.06:1FAIL
4.62:1AA
1.42:1FAIL
1.51:1FAIL
Workshop red
5.13:1AA
4.32:1AA·L
1.00:1FAIL
3.38:1AA·L
2.21:1FAIL
Service amber
11.84:1AAA
1.60:1FAIL
2.71:1FAIL
1.00:1FAIL
1.49:1FAIL