The ID Toolbox
← All tools

Colour Contrast Checker

Check any text colour against any background for WCAG AA and AAA, at normal size, at large size, and for interface elements. When it fails, it works out the nearest colour that passes by moving lightness only, so what you take back to the brand owner is still recognisably their colour.

Free · No account · Your files never upload

Text colour
Background

Large text looks like this

Body copy looks like this. Heat illness is caused by the body’s inability to maintain a normal temperature, and it has three levels of severity.

Small print, captions and disclaimers look like this.

4.5:1Passes AA
AA, normal textBody copy, labels, anything under 24px4.5Passes
AA, large text24px and up, or 18.7px bold3.0Passes
AA, interface and graphicsButton borders, icons, chart lines, focus rings3.0Passes
AAA, normal textThe stricter target, required by some public sector contracts7.0Fails
AAA, large textHeadings at the stricter target4.5Passes

What this does

It measures the contrast between a text colour and a background and reports it against the WCAG thresholds: 4.5 for normal text at AA, 3.0 for large text and for interface elements, 7.0 for AAA. The preview shows real copy at three sizes, because a ratio is a number nobody can picture.

The part other checkers leave out

When a colour fails, it works out the nearest one that passes, and it does so by moving lightness only. Hue and saturation are left alone deliberately. A suggestion that shifts the hue is no longer the brand colour and gets rejected the moment you show it to whoever owns the brand. Moving lightness keeps it recognisably the same colour, which is what makes the answer usable rather than merely correct.

Why the ratio is truncated, not rounded

A pair measuring 4.49 is displayed as 4.4 and marked as failing. Rounding it up to 4.5 would claim a pass it did not earn, and an auditor running their own tool will not round in your favour.

What it will not do

Contrast is one requirement among many and passing it does not make a course accessible. It also assumes both colours are opaque: a semi-transparent text colour depends on everything behind it, so flatten it first. And a colour that passes on a calibrated monitor still has to survive a projector in a bright room, which no formula accounts for.

Related tools