Reference
Design system
Every ratio was computed with tools/a11y/contrast.py, not eyeballed. This page is
noindex: it documents the template for whoever builds with it.
Colour tokens
--color-bg
#FBFAF7 — Page ground
--color-bg-alt
#EFEBE1 — Banding, and the “fair” matrix cell
--color-text
#161512 — 17.49:1 on ground · AAA
--color-text-muted
#5C574C — 6.88:1 on ground · AA
--color-band
#161512 — Inverted band
--color-on-band
#FFFFFF — 18.26:1 on band · AAA
--color-on-band-muted
#B9B3A4 — 8.74:1 on band · AAA
--color-accent
#8A6A16 — Brass. Fill only — 5.06:1 with white on top
--color-accent-text
#6E5410 — 6.85:1 on ground · AA — the text variant
--color-accent-on-band
#D6AE47 — 8.70:1 on band · AAA
--color-required
#6E5410 — Decoration; the asterisk is announced in words
Two brasses, and why
#8A6A16 is 3.35:1 as text on the ground, which fails. So the token is fill-only —
it is never used except with white on top — and a darker --color-accent-text
carries brass wherever brass has to be read. A third value lifts it for the dark band. Splitting
one brand colour into three tokens is cheaper than discovering the failure in an audit.
Matrix cells state a word
The tint behind each cell repeats what the word already says. Remove all colour and the grid still reads, which is the test.
Strong Fair Weak n/a
Rekey Replace
Type
League Spartan — display
Martian Mono — 0123456789 $45 · matrix cells and every figure
Martian Mono is here for one job: a cross-tab only reads as a cross-tab if the cells share a column width. Neither face appears in days 1–86.