Color Contrast Checker
Verify your color combinations meet WCAG 2.1 accessibility standards. Enter hex codes and see instant pass/fail results for AA and AAA compliance.
Test Your Colors
Aa
The quick brown fox jumps over the lazy dog.
Contrast Ratio
--
AA Normal Text
--
Min 4.5:1
AA Large Text
--
Min 3:1
AAA Normal Text
--
Min 7:1
AAA Large Text
--
Min 4.5:1
Understanding WCAG Contrast Requirements
What is Contrast Ratio?
Contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (same color) to 21:1 (black on white). Higher ratios mean better readability for all users, including those with low vision or color blindness.
AA vs AAA
AA is the minimum acceptable level for most web content. AAA is the enhanced level for improved accessibility. Large text (18px+ bold or 24px+ regular) has slightly lower requirements because larger characters are easier to read.
Why It Matters
Over 2.2 billion people worldwide have some form of vision impairment. Proper contrast ensures your content is usable by everyone, improves SEO, and meets legal accessibility requirements in many jurisdictions.
Quick Tips for Better Contrast
- Always test your actual text size and weight, not just the colors.
- Be careful with light gray text on white backgrounds – it rarely passes AA.
- Use this tool early in your design process, not as an afterthought.
- Remember that brand colors often need adjustment for digital accessibility.
- Test hover states, placeholder text, and disabled elements too.