Tool

Colour Contrast Checker

Test any two colours against the WCAG thresholds. You get the exact ratio, the pass or fail result at every level, and a suggested text colour when a pair fails.

Contrast checkerWCAG 2.2 AA and AAA

Text colour

Background colour

Preview

The quick brown fox jumps over the lazy dog

Body text at a normal size needs a contrast ratio of at least 4.5:1 to meet WCAG AA. This paragraph is set at the text colour you chose, on the background you chose.

Contrast ratio

19.80:1

AA normal text: AAA4.5:1
AA large text: AAA3:1
AAA normal text: AAA7:1
AAA large text: AAA4.5:1

This pair passes AAA for normal text. It is comfortable to read for long stretches, not merely acceptable.

Ratios are computed with the WCAG relative luminance formula, which weights green most heavily because the human eye is most sensitive to it. The same pair of colours can pass at 24px and fail at 14px — that is why size is part of the rule.

How the contrast ratio is calculated

The ratio compares the relative luminance of two colours, from 1:1 for two identical colours to 21:1 for pure black on pure white. Relative luminance is not a simple average of the channels: red, green and blue are weighted 0.2126, 0.7152 and 0.0722 respectively, because the eye is far more sensitive to green than to blue.

Each channel is also gamma-corrected before it is weighted, which is why two colours that look a long way apart in a colour picker can turn out to have a modest ratio. The formula is fixed by the WCAG specification, so every tool that implements it correctly will give the same number.

What AA and AAA require

Large text means at least 24px regular, or 19px bold. Thresholds are from WCAG 2.2.
Content	AA	AAA
Body text	4.5:1	7:1
Large text	3:1	4.5:1
Icons, borders, focus rings	3:1	—
Disabled controls	Exempt	—

Fixing a pair that fails

Almost every failure is solved by changing lightness rather than hue. Keep the hue so the design stays recognisable, and move the text colour darker or lighter until the ratio clears the threshold. Our suggestion does exactly that: it steps the lightness of your text colour one per cent at a time in both directions and returns the first value that reaches 4.5:1.

If neither direction works, the background is the problem. A mid-tone background has little room above or below it, so the fix is usually to lighten or darken the surface itself rather than to keep pushing the text.

Contrast is not the same as legibility

A ratio tells you that two colours differ enough in luminance. It says nothing about whether the text is comfortable to read. Several things can make a passing pair unpleasant:

Thin weights at small sizes. A 300-weight face at 13px needs considerably more contrast than the minimum to hold up.
High saturation on both sides. Saturated colours of similar lightness can appear to shimmer at their edges even when the ratio passes.
Pure black on pure white. A 21:1 ratio is technically perfect but often harsh; most well-made interfaces use a near-black around 15:1 instead.
Text over imagery. The ratio is measured against a flat colour, so a photo underneath makes it meaningless.

Where to apply it in a real interface

Check the pairs people actually read, not the ones that are easy to check. That means body copy on the page background, body copy on cards, placeholder text in inputs, labels on filled buttons, and link text against surrounding paragraphs. Placeholder text is the most commonly missed: it is usually set at a light grey that fails badly, and it carries real information.

If you are building a palette from scratch, run the final colours through the palette generator first and check contrast afterwards, rather than the other way round. It is much easier to adjust a palette that already hangs together than to force unrelated colours to pass.

Frequently asked questions

What contrast ratio do I need?

For normal body text, 4.5:1 meets WCAG AA and 7:1 meets AAA. For large text — 24px regular or 19px bold — the thresholds drop to 3:1 and 4.5:1. Interface components such as borders and icons need 3:1.

Which is easier to read, dark text on light or light on dark?

For long reading, dark text on a light background is generally more comfortable, which is why most books and documents are set that way. Light text on dark works well for large headings and interfaces, where the change of mode helps signal that something is different.

Why does a pair pass AA but still look wrong?

A ratio is arithmetic, not perception. Two colours can hit 4.5:1 and still vibrate unpleasantly if they sit at similar saturation — for example a saturated red on a saturated green. Contrast measures lightness difference; it does not measure discomfort.

Does the ratio change if I add a background image?

Yes, and this is the most common accessibility failure in practice. The ratio is calculated against a flat colour, so once text sits over a photo or gradient the real contrast varies across the text. Use an overlay or a solid panel to guarantee the ratio you measured.

Is 4.5:1 always enough for small text?

It is the legal and technical minimum, not a comfort target. For text below 16px, for thin weights, or for anything people read for more than a minute, aim higher. Many accessible design systems set a floor of 7:1 for body copy.

What is the difference between AA and AAA?

AA is the level most accessibility regulations reference and the realistic target for most projects. AAA is stricter — 7:1 for normal text — and is hard to reach with brand colours. Reaching AAA for body text while keeping a strong brand palette is a genuine design constraint, not a checkbox.