Contrast

What the thresholds mean

AA is the level most legislation and procurement requirements point at, including the EU Web Accessibility Directive and, in practice, the ADA. AAA is a higher bar that WCAG itself does not expect entire sites to meet.

The requirements are 4.5:1 for normal text, 3:1 for large text, and 3:1 for user interface components and meaningful graphics. "Large" means 18pt and up, or 14pt and up when bold — roughly 24px, or 18.5px bold.

Why placeholder text so often fails

Greyed-out placeholder text, disabled-looking labels and subtle helper copy are the usual offenders. They are grey because they are meant to recede, and the contrast ratio does not care about intent.

The common fix is not always darkening the text. Increasing the size or weight moves the requirement from 4.5:1 down to 3:1, which is often the more sympathetic change to a design.

How the suggested colours are chosen

When a pair falls short, the checker offers the nearest colour that passes — and nearest is doing real work there. The suggestion is computed in OKLCh, a perceptually uniform colour space, holding your hue and your chroma fixed and moving only the lightness until the ratio is met.

That matters because the obvious approach — darkening in HSL, or sliding towards black — visibly shifts the colour. Holding hue and chroma means the suggestion is recognisably the colour you picked, just light or dark enough to be readable, so it survives contact with the rest of your design.

Both directions are tried and the smaller change wins, and both the foreground and the background are offered, because which one you are allowed to change is a question only you can answer. If neither can reach the target at that hue, it says so — that means the hue or the chroma has to give, and no amount of lightening will fix it.

Checking a palette, not a pair

Nobody has one pair. They have a palette and need to know which combinations from it are usable — so paste the whole thing and every pairing is checked at once. Green cells pass AA for body text, amber ones are large-text-only, red ones fail. Clicking a cell loads that pair into the checker above with its preview and suggestions.

What this measures, and what it does not

The ratio comes from WCAG 2's relative luminance formula. It is a good, testable proxy — but it is known to be imperfect, particularly for light text on dark backgrounds, where it can pass combinations that read poorly.

APCA is shown alongside for that reason. It is a newer perceptual model, reported as a lightness contrast value Lc from 0 to about 106, and it handles dark backgrounds far better. It is still a draft and carries no legal weight, which is why it sits next to the WCAG verdict rather than replacing it — but where the two disagree, APCA is usually the one that matches what your eyes say.

So treat a pass as necessary rather than sufficient, and look at the preview above before shipping.

Check a foreground and background pair against the WCAG contrast requirements, with separate verdicts for normal text, large text and interface components. Shows the actual ratio and a live preview rather than just a pass or fail badge.

It's one of the free tools in the util.quest collection — nothing to install, and no account needed. Found a bug or want a feature? Reach out at [email protected].