Skip to content
HQ8T

Colour Contrast Checker

Check text colours against WCAG AA and AAA.

Large heading text

Normal body text looks like this. The quick brown fox jumps over the lazy dog.

Small caption text, 14 px.

4.47:1

Contrast ratio (1:1 to 21:1)

✗ Fail

AA · normal text (4.5)

✓ Pass

AA · large text (3)

✗ Fail

AAA · normal text (7)

✗ Fail

AAA · large text (4.5)

Closest passing text colour: #5e61e5

How to use

  1. 1Pick or type the text colour.
  2. 2Pick or type the background colour.
  3. 3Read the contrast ratio and the AA/AAA results.
  4. 4If it fails, use the suggested passing colour.

Frequently asked questions

What contrast ratio do I need?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold). AAA asks for 7:1 and 4.5:1.

Why does contrast matter?

Low-contrast text is hard to read for people with low vision, older users and anyone reading a phone in sunlight.

How is the suggestion made?

The text colour is darkened (or lightened on dark backgrounds) in small steps until it reaches 4.5:1, keeping its hue.

Which formula is used?

The WCAG 2 relative luminance formula, the same one used by browser developer tools and accessibility audits.

You may also need