◐Colour Contrast Checker

Grey text on white is where most accessibility audits start failing, and it is almost always a decision somebody made because black felt too harsh.

Here is the arithmetic. Pure black on white gives you 21:1, the maximum possible. The #767676 grey this tool opens with gives 4.54:1 — it scrapes past the AA threshold for body text with almost nothing to spare. Lighten it one shade to #808080 and you are at 3.95:1, which fails. That is the entire margin: one step on a colour picker.

The thresholds, and which one applies

AA wants 4.5:1 for normal text and 3:1 for large. AAA wants 7:1 and 4.5:1. Large means 24px, or 18.66px if it is bold — a distinction that matters because a bold subheading can legitimately use a colour your body copy cannot.

The threshold people forget is the third one. Interface components — input borders, icons, focus rings, the line under an active tab — need 3:1 against whatever sits behind them. A form where you cannot see which field is focused fails this, and it fails it for everyone using a keyboard, not just people with low vision.

Three things worth checking before you sign off

Placeholder text counts as text. It is the most common failure in audits precisely because designers treat it as decoration.

Text over a photograph has to be measured against the lightest and the darkest point it actually crosses, not the average. A scrim or a gradient overlay is usually the cheapest fix.

And if a pairing fails, try the swap button before you abandon the colour. Reversing foreground and background frequently passes when the original does not, which lets you keep the brand colour and move it to the background instead.

Ratios here follow the WCAG 2.1 relative luminance formula exactly, so the figure should match any other conformant checker. Nothing you type leaves the page.