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
#F2F4F5 — Cool pale grey
--color-bg-alt
#E3E7E9 — Banding
--color-surface
#FFFFFF — Cards and form controls
--color-text
#14181B — 16.18:1 on ground · AAA
--color-text-muted
#51585C — 6.56:1 on ground · AA
--color-border
#7C858A — 3.41 / 3.02 / 3.76 — form controls, so 3:1 everywhere
--color-accent
#0D3F5C — The computed figure — 10.11:1 on ground · AAA
--color-band
#14181B — Inverted band, and the calculator output
--color-on-band
#F2F4F5 — 16.18:1 on band · AAA
--color-on-band-muted
#9EA6AA — 7.22:1 on band · AAA
--color-accent-on-band
#7FC4E8 — 9.32:1 on band · AAA
The calculator has no JavaScript in it
Nine radios sit as siblings ahead of the output, and a chain like
#m2:checked ~ #t3:checked ~ #r1:checked ~ .out [data-k] reveals exactly one
of 27 lines. The rules are generated in the page from the same array that renders the
lines, so a price and its selector cannot drift apart.
Two consequences worth stating. Hidden lines use display:none, which takes
them out of the accessibility tree — a screen reader hears one price rather than 27. And
with CSS off, all 27 render as a plain price list, so the degraded view carries
more information than the enhanced one. The radios are clipped rather than
display:noned, or the form would stop being keyboard-operable.
The accent was picked by measurement
A first candidate at #0A5C8A sat 3° of hue and 4% lightness from cleaning-service. This one is 12% darker than that, 20% apart in saturation from massage-therapist and 18° from plumber. It is reserved for the figure the calculator produces.
Type
Kumbh Sans — display and UI
Reddit Mono — $900 · $6,900 · $15,200
A form-led page wants a UI sans rather than an editorial face, and money needs tabular figures that do not shift width as the calculator changes. Neither appears in days 1–92.