Colour contrast checker

The thresholds, in plain numbers

• 4.5:1 — normal text, to meet AA. This is the one that applies to almost everything you write.
• 3:1 — large text at AA. Large means 24px and over, or 18.66px and over when bold.
• 3:1 — anything non-text that carries meaning: icons, form field outlines, focus rings, chart lines, the border that shows which tab is selected.
• 7:1 and 4.5:1 — the same two, raised to AAA.

The large-text exemption is the one that costs people. A 20px semibold heading is not large text and needs the full 4.5:1 — the bold allowance starts at 18.66px and the plain one at 24px. Designs routinely assume a heading is exempt because it looks big, and it is the headings that then fail an audit.

Where the number comes from

Each channel is scaled to 0–1, linearised to undo the gamma curve your screen applies, and weighted 0.2126 red, 0.7152 green, 0.0722 blue — green dominates because human vision is most sensitive to it. That gives relative luminance. The ratio is(lighter + 0.05) ÷ (darker + 0.05).

The 0.05 is a flare term standing in for the light your screen reflects from the room. It is why the maximum possible ratio is21:1, black on white, rather than infinity — and why two very dark colours are closer together in ratio than they look.

A worked check you can do against any tool: #767676 on white is 4.54:1 and passes AA, while #777777 is 4.48:1 and fails. One hex step apart. If a checker disagrees with those two numbers, it is not implementing WCAG.

Why the fix keeps your hue

When a pair fails, the useful answer is not "pick another colour" — you chose that colour for a reason. Contrast is driven bylightness, not hue, so the suggestion above holds your hue and saturation and walks the lightness in both directions until one passes, then offers whichever moved least.

Sometimes neither direction works, and the tool says so instead of offering something that does not pass. A saturated mid-tone against a mid grey can be unreachable at every lightness, because both ends run out of contrast before they get there. When that happens the background is the thing to change.

This is also why yellows and light greens are so hard on white and deep blues so hard on black: their luminance is naturally near one end. It is not a failure of the palette, it is arithmetic, and it is better to know before the brand guidelines are signed off.

Passing is a floor, not a finish line

A ratio is one measurable thing among many, and clearing it does not make a design accessible. It says nothing about:

• Colour carrying meaning on its own — a red border marking an invalid field is invisible to a lot of people. It needs text too.
• Focus visibility — the outline that shows where the keyboard is has its own 3:1 requirement, and removing it is one of the most common accessibility failures on the web.
• Text over images, where the ratio changes across the picture and the worst spot is the one that counts.
• Real conditions — a phone in sunlight, an old screen, tired eyes at midnight.

We check contrast on rendered elements against the actual painted background rather than against the palette, on every page of this site, because a token says what a colour is meant to be and the browser says what it is.

Questions

What ratio do I need?

4.5:1 for normal text, 3:1 for large text and for meaningful non-text. Large is 24px, or 18.66px bold — not "looks big".

Why does it fail on white but pass on black?

Because contrast is about lightness, and a mid-tone sits far from neither end. Change the lightness, not the hue — which is what the suggestion above does.

Does passing mean it is accessible?

No. It means one specific failure has been avoided. Focus rings, colour-only meaning and text over images are separate problems.

Is anything sent anywhere?

No. It runs entirely in your browser.

More free tools

Image compressor · Random picker · Password generator · Unit converter · Time zone converter

All free, all running entirely in your browser. Built by Maxverse Lab, a software studio in Karachi.