4.8(2,400 ratings)
Developer & Design Tools
Color Contrast Checker
Instantly check color contrast ratios against WCAG 2.1 AA and AAA standards. Live preview, multiple input formats, color blindness simulation, and suggestions for accessible color pairs. Essential for designers and developers.
Live Preview
The quick brown fox jumps over the lazy dog.
Large text example (for WCAG large text rules)
UI component example — button text
17.74:1
Contrast Ratio
Normal Text (AA 4.5:1 / AAA 7:1)
AAA
Large Text (AA 3:1 / AAA 4.5:1)
AAA
UI / Graphics (AA 3:1)
AA
All calculations follow the official WCAG 2.1 relative luminance formula. Works entirely in your browser.
Why Color Contrast Matters
Over 8% of men and 0.5% of women have some form of color vision deficiency. Low contrast text makes content unreadable for millions of people and fails legal accessibility requirements in many countries. This checker gives you the exact numbers you need to pass audits and create truly inclusive interfaces.
How to Use the Results
- Normal body text should aim for at least AA (4.5:1).
- Headings and large text have more lenient requirements.
- UI elements (borders, icons, form controls) need 3:1 minimum for AA.
- Use the suggestion button when a pair is close but not quite there.