Contrast Checker
Check color contrast ratios and WCAG accessibility compliance
Foreground (Text) Color
Background Color
Contrast Ratio
WCAG 2.1 Compliance
Live Preview
Normal Text (16px)
The quick brown fox jumps over the lazy dog. This is a sample text to demonstrate the contrast ratio between the selected colors.
Large Text (24px)
This is large text that has different WCAG requirements.
Inverted Preview
This shows how the colors look when swapped. Sometimes one direction works better than the other.
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments.
WCAG Level AA
Normal text (under 18pt): Minimum contrast ratio of 4.5:1
Large text (18pt+ or 14pt+ bold): Minimum contrast ratio of 3:1
Level AA is the standard requirement for most websites and applications.
WCAG Level AAA
Normal text (under 18pt): Minimum contrast ratio of 7:1
Large text (18pt+ or 14pt+ bold): Minimum contrast ratio of 4.5:1
Level AAA is the enhanced requirement providing the highest level of accessibility.
Why This Matters
Good color contrast ensures your content is accessible to users with:
- Low vision or visual impairments
- Color blindness (affects ~8% of men and 0.5% of women)
- Age-related vision changes
- Users viewing content in bright sunlight or low-light conditions
Best Practices
- Aim for AA compliance at minimum, AAA when possible
- Don't rely on color alone to convey information
- Test your design with actual users who have visual impairments
- Use tools like this contrast checker during the design phase
- Remember that contrast needs may vary based on font weight and size