The ID Toolbox
← All tools

Color Contrast Checker

Check any text color 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 color that passes by moving lightness only, so what you take back to the brand owner is still recognizably their color.

Free · No account · Your files never upload

Text color
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 color 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 color 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 color and gets rejected the moment you show it to whoever owns the brand. Moving lightness keeps it recognizably the same color, 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 colors are opaque: a semi-transparent text color depends on everything behind it, so flatten it first. And a color that passes on a calibrated monitor still has to survive a projector in a bright room, which no formula accounts for.

Related tools