Contrast Ratio

While readability was judged by eye, the discussion ended as a matter of taste. There was no way to settle "that's too light" against "it looks fine to me," and the same color looked different on every display.

At Pagedeck, Noa and Mia split over the color of secondary text. It read cleanly on Noa's monitor and sank into the background on Mia's laptop. Both were arguing from their own screen, so nothing got decided. The color shipped as it was, and months later it came back as a finding in a public-sector customer's review.

Contrast ratio turns that judgment into a number. Feed in two colors, get one ratio, and whether it clears the threshold decides pass or fail. The answer is the same regardless of which screen you're looking at.

Work out the brightness of each color, then divide the lighter by the darker. The result runs from 1:1 for identical colors up to 21:1 for black against white.

1. Compute relative luminance per color. The red, green and blue values get weighted differently and summed. The eye is most sensitive to green and least to blue, so a plain average diverges from the brightness people actually perceive.
2. Add 0.05 to both luminance values and divide the larger by the smaller. That 0.05 accounts for the ambient light always reflecting off a screen.
3. Write the result as something like 4.5:1.

Nobody does this by hand. Design tools and browsers both ship a picker that reports the value from two colors. What needs attention is what you're measuring against what. If a translucent layer sits in between, or text is placed over a photo, measure the composited color that the eye actually sees; over a gradient, take the worst point as the baseline.

The thresholds come from WCAG level AA. Body text needs 4.5:1 or better, while large headings and non-text elements like button borders need 3:1. Light grey text on white sits around 2.8:1 and fails; two steps darker reaches 4.7:1 and passes. In dark mode the background changes, so every pair has to be measured again.

"This secondary text is 2.8:1. Let's go two steps darker."

It misses the threshold, so move to a darker step of the palette.

"White text on the brand yellow won't work. I'll switch the text to black."

Yellow is close in brightness to white, so almost no contrast comes out of that pair.

"Measure contrast while you're building the palette. Catching it later means redoing all of it."

Judge it at the point where colors are chosen.

Noa now records, alongside each step of a color scale, its ratio against white and against black. Which text step is allowed on which background step is already in that table, so Theo never has to ask for the value when a design arrives.