Contrast ratio and readable text

Grey #767676 on white has a contrast ratio of 4.54:1 and passes the WCAG minimum for body text; one step lighter, #777777 gives 4.48:1 and fails.

Relative luminance

To decide whether text can be read, the Web Content Accessibility Guidelines do not use hue or HSL lightness. They use relative luminance, a number from 0 for black to 1 for white that tracks how much light a colour sends to the eye. WCAG 2.2 defines it in two steps. First, each channel is turned into a number from 0 to 1 by dividing by 255 and then undoing the sRGB curve: if the value is at most 0.04045, divide it by 12.92; otherwise compute ((value + 0.055) / 1.055) to the power 2.4. Second, the three results are weighted and added: L = 0.2126 R + 0.7152 G + 0.0722 B.

The weights explain a lot. Green carries more than 70% of the total, blue barely 7%. That is why pure blue #0000ff has a luminance of only 0.0722 and pure yellow, red plus green, has 0.9278. The specification also records a small history: before May 2021 the threshold was written 0.03928, copied from an older document. It was corrected to 0.04045, and WCAG notes that this has no practical effect on the results.

Contrast ratio

The contrast ratio compares two luminances: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 the darker. The 0.05 stands for a little stray light that always reaches the eye, and it keeps the ratio finite for black. Ratios run from 1:1, a colour against itself, to 21:1, black against white: (1 + 0.05) / (0 + 0.05) = 21. For #767676 on white the luminance is 0.1812, so the ratio is 1.05 / 0.2312 = 4.54.

Here is the whole calculation for the blue #2273c3 used in unit 2, rgb(34 115 195). Divided by 255, the channels are 0.1333, 0.4510 and 0.7647. All three are above 0.04045, so each goes through the power formula, giving 0.0160, 0.1714 and 0.5457. Weighted, they become 0.0034 from red, 0.1226 from green and 0.0394 from blue, and the sum is a luminance of 0.1654. Against white the ratio is 1.05 / 0.2154 = 4.87, so this blue passes AA for body text on a white page. Against black it is 0.2154 / 0.05 = 4.31, just short.

The thresholds

WCAG 2.2 turns the ratio into pass or fail lines. Success criterion 1.4.3, at level AA, asks for at least 4.5:1 for normal text and 3:1 for large-scale text. Large-scale means at least 18 point, or 14 point bold; WCAG notes this is roughly 1.5 em and 1.2 em bold for common body fonts. Criterion 1.4.6, at level AAA, raises the bar to 7:1 and 4.5:1. Criterion 1.4.11 asks for 3:1 for the parts of buttons, form fields and icons that people need to see. Pure red #ff0000 on white gives 4.00:1, which is fine for a large heading but fails for body text. Blue #0000ff on white gives 8.59:1 and passes everything.

One more useful fact falls out of the formula. A colour with luminance about 0.179 has the same contrast against white and against black, about 4.58:1. Darker than that, white text reads better on it; lighter than that, black text does. The panel under the model shows both ratios and names the better choice.