Colour contrast that actually passes

Light grey text on white is the house style of the modern web, and it is the single most common accessibility failure on the modern web. The two facts are the same fact.

The numbers you need

• Normal body text: 4.5:1 for AA, 7:1 for AAA.
• Large text — 24px, or 18.66px when bold: 3:1 for AA, 4.5:1 for AAA.
• Interface components and meaningful graphics: 3:1.
• Purely decorative elements: no requirement, because nobody needs to read them.

The useful landmark is #767676 on white, which lands at 4.54:1. That is the lightest grey that passes AA for body text. Anything lighter — and most placeholder greys are lighter — fails.

How the ratio is really calculated

Not by comparing brightness the way your eye would. Each channel is converted from sRGB to linear light: divide by 255, then values at or below 0.03928 are divided by 12.92 and the rest go through ((c + 0.055) ÷ 1.055) raised to 2.4. Relative luminance is 0.2126R + 0.7152G + 0.0722B, and the ratio is (lighter + 0.05) ÷ (darker + 0.05).

The green coefficient being three times the red one is not arbitrary — human vision is most sensitive to green. It is also why a mid-green and a mid-red that look equally bright can have wildly different contrast against the same background.

Black on white is 21:1. That is the ceiling. Nothing in sRGB goes higher.

When it fails, nudge rather than redesign

The usual reaction to a failing brand colour is to abandon it. Usually that is not necessary. Walking the colour toward black or white — whichever way the background allows — until it hits 4.5:1 keeps the hue recognisably the one that was chosen. It is a different shade of your colour, not a different colour.

If no shade of the hue reaches 4.5 against that background, the background is the problem. That is worth knowing precisely, rather than iterating on the text colour forever.

What passing does not prove

Contrast is necessary and not sufficient. A form that marks errors only in red passes every contrast check and is still unusable for someone who cannot distinguish red. Text over a photograph has a different effective background in every corner. A translucent overlay means the colour you tested is not the colour that renders.

Run the check, fix what it finds, and then look at the page with the stylesheet's colours turned to greyscale. What survives that is genuinely readable.