Colour contrast

Light grey #999999 on white has a contrast ratio of 2.85:1, well under the 4.5:1 that WCAG 2.2 asks for body text.

Why contrast matters

Text that is pale against its background is hard to read for people with low vision, for many older readers and for anyone using a phone in sunlight. WCAG 2.2 does not leave "pale" to taste. It measures the relative luminance of the two colours, a number from 0 for black to 1 for white, and compares them with the contrast ratio (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. The result runs from 1:1, a colour on itself, to 21:1, black on white. The colour theory course works through the formula step by step; here we use it.

The numbers to meet

Success criterion 1.4.3 Contrast (Minimum), at level AA, asks for at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. Criterion 1.4.6 at level AAA raises these to 7:1 and 4.5:1. Criterion 1.4.11 Non-text Contrast asks for 3:1 for the parts of controls and graphics that people need to see, such as the border of a text field or the lines of a chart. Logos and text that is purely decorative or part of an inactive control are exempt.

A few values are worth remembering. The grey #767676 gives 4.54:1 on white, and is often quoted as the lightest plain grey that passes AA; #777777 gives 4.48:1 and fails. The darker #595959 reaches 7.00:1 and passes AAA. Saturated colours can be misleading: pure red #ff0000 on white is only 4.00:1, while the deeper red #c01c28 reaches 6.11:1. Placeholder text inside form fields is a frequent failure, because designers often make it very light on purpose.

Checking colours in practice

You rarely need to work the formula by hand. When you inspect a text element, the colour picker in the developer tools of major browsers shows its contrast ratio against the background, often with a line marking the AA and AAA thresholds. Two cases need extra care. Text over a photo or a gradient has no single background, so check it against the lightest part it sits on, or put a solid panel behind it. And a site with a dark theme needs checking twice, because a colour that passes on white can fail on near-black: the blue #1a5fb4 gives 6.29:1 on white but only 3.34:1 on pure black.

Never colour alone

Contrast between text and background is half the story. Criterion 1.4.1 Use of Color, at level A, says colour must not be the only way information is shown. Red #c01c28 and blue #1a5fb4 both read well on white, but against each other their ratio is only 1.03:1. In greyscale, or to someone who cannot tell red from blue, they become the same grey. So a required field marked only by a red label, or a link that differs from the text around it only by colour, needs a second cue: a word, an icon, an underline.