Color Contrast Checker
Verify that your text and background color combinations meet WCAG (Web Content Accessibility Guidelines) accessibility standards. Ensure your designs are readable for all users, including those with visual impairments.
WCAG Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | Not defined |
Large text is defined as 18pt+ or 14pt+ bold.
How to Use
1. Enter your foreground (text) color
2. Enter your background color
3. View the contrast ratio
4. Check pass/fail for each WCAG level
Understanding Contrast Ratios
| Ratio | Rating | Readability |
|---|
| 21:1 | Maximum | Black on white |
| 7:1+ | Excellent | AAA compliant |
| 4.5:1+ | Good | AA compliant |
| 3:1+ | Minimum | Large text only |
| <3:1 | Fail | Accessibility issue |
Common Contrast Issues
| Issue | Problem | Fix |
|---|
| Light gray on white | Low contrast | Darken the gray |
| Yellow on white | Very low contrast | Use dark text |
| Blue on black | Can be low | Check specific shades |
Why Accessibility Matters
- Legal compliance: Many countries require accessible websites
- User experience: ~15% of users have some visual impairment
- SEO: Accessibility impacts search rankings
- Reach: Don't exclude potential users
Test your color combinations to ensure WCAG compliance.