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 | AA4.5:13:13: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:1MaximumBlack on white 7:1+ExcellentAAA compliant 4.5:1+GoodAA compliant 3:1+MinimumLarge text only <3:1FailAccessibility issue
Common Contrast Issues
IssueProblemFix Light gray on whiteLow contrastDarken the gray Yellow on whiteVery low contrastUse 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