Contrast Checker
Enter two colours and see the real contrast ratio, whether it passes AA and AAA at both text sizes, and how it actually looks.
Runs entirely in your browser — nothing is uploaded to a server.
—Contrast ratio
—AA · normal text
—AA · large text
—AAA · normal text
—UI components
Large heading text
Body copy at a normal size — this is the size most of your page will actually be, so it is the one that matters most.
Small print, captions and footnotes at 13 pixels.
Closest passing alternative
If the pair fails, here is the nearest version of your text colour that passes AA on the same background.
What the levels mean
| Level | Applies to | Minimum ratio |
|---|---|---|
| AA | Normal text (under 18pt / 24px) | 4.5 : 1 |
| AA | Large text (18pt / 24px, or 14pt bold) | 3 : 1 |
| AA | Icons, borders and other UI parts | 3 : 1 |
| AAA | Normal text | 7 : 1 |
| AAA | Large text | 4.5 : 1 |
Frequently asked
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1.
What counts as large text?
18pt (24px) regular, or 14pt (18.66px) bold and above.