t03 · Design~10 min saved per pass

Colour Contrast Checker

Test any text and background combination against WCAG AA and AAA accessibility standards, with a live preview.

Runs entirely in your browser. Nothing is uploaded.

Text colour

Background colour

The quick brown fox

jumps over the lazy dog.

15.54:1

Contrast ratio

AA: normal textPass

AA: large text (18pt+)Pass

AAA: normal textPass

AAA: large text (18pt+)Pass

About this tool

/tools/contrast-checker

Accessible colour contrast makes your text readable for everyone, including people with low vision. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios. This tool checks your colours against all four thresholds instantly.

Enter a text colour and a background colour, then read off the contrast ratio and which standards it passes. Adjust until you hit at least AA for body text.

Frequently asked questions

4 answers

What contrast ratio do I need to pass WCAG?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.

What counts as 'large text'?

Large text is at least 18pt (roughly 24px), or 14pt (roughly 18.66px) if bold. Larger text is easier to read, so it's allowed a lower contrast ratio.

How is the contrast ratio calculated?

It's based on the relative luminance of the two colours: (lighter + 0.05) / (darker + 0.05). Ratios range from 1:1 (identical colours) to 21:1 (pure black on pure white). This tool uses the exact WCAG formula.

Does this work for colour-blind users?

Contrast ratio is one part of accessibility but doesn't capture everything. Avoid relying on colour alone to convey meaning, and test your palette with a colour-blindness simulator as well.

More free tools

All tools

Get the next tool first.

We publish a tool when one of our own builds throws off something worth giving away. One email per release; nothing else.