WCAG Contrast Checker
Check color contrast for WCAG accessibility compliance
A fast, free, and open-source tool to help you build a more accessible web for everyone.
Developed by award-winning development experts•Learn about our expertise
Quick Presets
Foreground Color
Background Color
Preview Settings
Contrast Ratio
0.00:1
20px
12px32px
Body: 20px • Heading: 60px
Heading Preview
The Quick Brown Fox Jumps Over the Lazy Dog
Body Text Preview
Web accessibility ensures that websites, tools, and technologies are designed and developed so that people with disabilities can use them. This includes the ability to perceive, understand, navigate, and interact with the web effectively.
Color contrast is a critical aspect of web accessibility. Sufficient contrast between text and background colors helps users with visual impairments, color blindness, or those viewing content in bright sunlight.
UI Elements Preview
WCAG Compliance
Overall Status
Poor
Heading (60px)
Large TextAA
Fail • 3:1 req.
AAA
Fail • 4.5:1 req.
Body Text (20px)
Large TextAA
Fail • 3:1 req.
AAA
Fail • 4.5:1 req.
WCAG Guidelines:
- AA: Minimum contrast (4.5:1 normal, 3:1 large)
- AAA: Enhanced contrast (7:1 normal, 4.5:1 large)
- Large text: 18px+ or 14px+ bold