Contrast checker
Test any text and background pair against WCAG accessibility guidelines, or check every pairing in a palette in one matrix. Failing pairs get a one-click fix.
How to use this tool, with screenshots →AA (4.5:1 or more). Passes normal text.
The quick brown fox
Good contrast keeps your content readable for everyone, including people with low vision and anyone reading on a phone in bright sunlight.
- Pass · AA · Normal textNeeds 4.5:1 · WCAG 1.4.3 · yours 5.36:1
- Fail · AAA · Normal textNeeds 7:1 · WCAG 1.4.6 · yours 5.36:1
- Pass · AA · Large textNeeds 3:1 · WCAG 1.4.3 · yours 5.36:1
- Pass · AAA · Large textNeeds 4.5:1 · WCAG 1.4.6 · yours 5.36:1
- Pass · AA · UI components & graphicsNeeds 3:1 · WCAG 1.4.11 · yours 5.36:1
Palette matrix
6 colors · 30 text-on-background pairsRows are the text color, columns the background. Each cell shows the ratio and the best level that pair reaches. Select a cell to inspect it above. Same numbers as the single checker.
| Text color \ Background | #264653 | #2A9D8F | #E9C46A | #F4A261 | #E76F51 | #FFFFFF |
|---|---|---|---|---|---|---|
| #264653 | — | |||||
| #2A9D8F | — | |||||
| #E9C46A | — | |||||
| #F4A261 | — | |||||
| #E76F51 | — | |||||
| #FFFFFF | — |
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA raises that to 7:1 and 4.5:1.
What about transparent text?
Contrast only exists between two solid colors, so semi-transparent text is blended over the background you choose first, and that blended color is what gets measured. The opacity slider does this for you.
Does passing here mean my site is accessible?
No. It means the pairs you checked meet the WCAG contrast thresholds. Real accessibility also covers layout, focus states, text size, motion and more.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors: (lighter + 0.05) / (darker + 0.05), giving a value from 1:1 to 21:1.