Reference
Design system
Every ratio was computed with tools/a11y/contrast.py against all three grounds.
This page is noindex: it documents the template for whoever builds with it.
The first <audio> in the library
A hundred and eleven templates in, and this is the first with sound. Three click tracks
generated with ffmpeg from a sine impulse and silence — not recordings,
and not mixes. That distinction is the reason they can be here at all: the sets on this
page are fictional, and a fabricated mix would be inventing a product, where a metronome
at 126 BPM is just a metronome at 126 BPM.
Each player is a bare <audio controls>, which is keyboard-operable and
labelled for free, with preload="none" so nobody who never presses play pays
for three files. Every band states its BPM and its purpose in text, so the audio
illustrates the point and never carries it — the page works identically with sound
off, which is the same test the colour tokens have to pass.
Four of eleven, and that is the argument
The rider marks only four lines Required and the other seven Asked for, and the headline counts them from the data. A rider where everything is a must teaches a promoter nothing about what matters, so when something has to give they guess — and they guess wrong, because nobody told them the booth monitor was load-bearing and the water was not.
Required is red, and it is not the accent
Both rider states are a word and a glyph via data-glyph before they are a
colour. On a table somebody is meant to tick, “required” must not share a hue
with a heading — and --state-gone does double duty on the cost total,
which is the other number on the page that should stop a reader.
Type
Antonio — condensed display
Lekton — 126 BPM · 3 h · −$395
Body is Signika. Tempos, set lengths and money all sit in columns that have to align. None of the three appears in days 1–111.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F4F2F7 | Light lilac-grey | |
--color-bg-alt | #E6E3EC | Banding | |
--color-surface | #FFFFFF | Cards, tempo panels | |
--color-text | #17141C | 16.38 / 14.36 / 18.21:1 · AAA | |
--color-text-muted | #6E6175 | 5.20 / 4.56 / 5.79:1 · AA | |
--color-border | #8C7D94 | 3.45 / 3.02 / 3.83 — non-text only | |
--color-accent | #A129C9 | Hue 285 — 5.14 / 4.51 / 5.71:1 · AA | |
--state-ok | #1B7447 | Asked for — 5.20 / 4.56 / 5.78:1 | |
--state-gone | #C02D2D | Required, and the cost total — 5.17 / 4.53 / 5.75:1 | |
--color-band | #17141C | Inverted band | |
--color-on-band | #F4F2F7 | 16.38:1 on band · AAA | |
--color-on-band-muted | #A99DAF | 7.05:1 on band · AAA | |
--color-accent-on-band | #D083E9 | 7.03:1 on band · AAA |
The border token clears 3:1 against all three grounds, which is what WCAG 1.4.11 asks of a non-text boundary. It is never used for text.