Tone scales
A tone scale is one color spread across a fixed series of brightnesses — the same series for every color of the palette. Add a color and it appears here as a row of steps, light to dark. The steps are cut evenly in contrast: every neighbouring pair stands in the same ratio, and the number above a step says how far along the way from white to black it is. The color is taken there with its hue untouched, as far as the hue allows, and every cell says the luminance it reached.
WCAG 2 reads contrast off luminance alone. Two colors on the same step therefore have a contrast of 1:1 to each other, whatever their hues, and how much contrast any two colors have depends on the distance between their steps and on nothing else — not on where on the scale that distance sits. Settle it once, and the hue is free. Eleven steps are a convenient example to count with: neighbours then stand ten points apart, so five steps of distance are fifty points.
| Distance | Contrast | What it carries |
|---|---|---|
| 30 points | 2.49:1 | nothing — under every threshold |
| 40 points | 3.38:1 |
large text —
1.4.3
Contrast (Minimum) graphics and controls — 1.4.11 Non-text Contrast |
| 50 points | 4.58:1 | body text — 1.4.3 Contrast (Minimum) |
| 70 points | 8.42:1 | body text at the enhanced level — 1.4.6 Contrast (Enhanced) |
Those figures hold wherever the pair is taken from: fifty points measure 4.58:1 at the light end of the scale and 4.58:1 at the dark end. Half the scale is the middle step, #757575, which stands at exactly that contrast from white and from black alike.