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
#14171A — Graphite — page ground
--color-bg-alt
#1B1F23 — Banding
--color-surface
#20252A — Gauges and cards
--color-text
#E9EDF0 — 15.28:1 on ground · AAA
--color-text-muted
#9AA5AE — 7.17:1 on ground · AAA
--color-accent
#C3D91F — Acid · 11.36:1 on ground · AAA
--color-on-accent
#111308 — 11.84:1 on acid · AAA
--flag-ok
#7FD17F — In band · 8.33:1 on surface · AAA
--flag-low
#F2A65A — Below band · 7.63:1 on surface · AAA
--flag-high
#EF6E6E — Above band · 5.24:1 on surface · AA
The gauge
Built on a real <meter> — the correct element for a value inside a known range.
min, low, high, optimum and max are its own
attributes, so assistive tech announces the reading and its bounds with no ARIA at all. Browsers
style it inconsistently, so it is repainted here — but the element, and therefore the semantics, stay.
Word first, colour second: every gauge also prints “in band”, “below band” or “above band”.
Cyanuric acid
88ppm
Above band
Type
Archivo Narrow — display
Space Mono — readings and field labels. Neither font appears in days 1–82.