Contrast Checker (WCAG)
Verify your color combinations meet accessibility standards.
Sample Text
This is how your text will look against this background.
21.00:1
Contrast Ratio
✅
AA Normal
4.5:1 required
✅
AA Large
3:1 required
✅
AAA Normal
7:1 required
✅
AAA Large
4.5:1 required
What is WCAG Color Contrast?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with visual impairments, including color blindness.
WCAG Levels Explained
- Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
- Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text. Recommended for critical content.
Why Accessibility Matters
Poor contrast affects approximately 8% of men and 0.5% of women globally who have some form of color blindness. Ensuring proper contrast makes your website usable for everyone.
Tips for Better Contrast
- Avoid pure black (#000) on pure white (#fff) for body text; it can cause eye strain.
- Test your colors in grayscale to simulate color blindness.
- Use this tool during design, not as an afterthought.