Color Contrast Checker
Check the contrast ratio between two colours against WCAG AA and AAA standards for normal and large text, with a live preview. Free accessibility contrast checker for designers and developers.
The quick brown fox
jumps over the lazy dog — 0123456789.
Contrast ratio
15.52:1
Normal text — AA
needs 4.5:1
Normal text — AAA
needs 7:1
Large text — AA
needs 3:1
Large text — AAA
needs 4.5:1
How to use the Color Contrast Checker
- 1
Pick your text colour.
- 2
Pick your background colour.
- 3
Read the contrast ratio and pass/fail badges.
- 4
Adjust until you hit AA or AAA.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18pt (24px) regular, or 14pt (18.66px) bold and above.
Why does contrast matter?
Sufficient contrast makes text readable for people with low vision or colour deficiency — and it's a legal requirement in many places.
Tips & discussion
Share a trick, ask a question, or help others get more out of this tool.
Loading tips…