Color Contrast Checker - WCAG Accessibility Validator
Check if your text and background colors meet WCAG accessibility guidelines. Ensure your website is readable for everyone.
Large Text Preview (24px Bold)
Normal text preview (16px). The quick brown fox jumps over the lazy dog.
Smaller text at 14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Why Color Contrast Matters
Color contrast affects readability for everyone, but it's especially critical for people with visual impairments, color blindness, or those viewing content in challenging lighting conditions. Poor contrast can make your website unusable for a significant portion of your audience.
Understanding WCAG Guidelines
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios:
- Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text
- Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text
- Large Text: 18pt (24px) or 14pt (18.5px) bold
How Contrast Ratio is Calculated
The contrast ratio is calculated using relative luminance:
- Luminance values are computed for each color (0-1 scale)
- The ratio is: (L1 + 0.05) / (L2 + 0.05)
- L1 is the lighter color, L2 is the darker
- The ratio ranges from 1:1 (same color) to 21:1 (black on white)
Common Contrast Issues
- Gray text on white: Light gray (#777) fails AA on white.
- Colored backgrounds: Vibrant colors often fail with white text.
- Placeholder text: Often too light to meet standards.
- Links within text: Must have sufficient contrast with surrounding text.
Tips for Better Contrast
- Use darker shades for text, not lighter ones.
- Test with color blindness simulators.
- Avoid pure black (#000) on pure white (#FFF) for long text—it can cause eye strain.
- Ensure focus states also meet contrast requirements.
- Don't rely on color alone to convey information.
Legal Requirements
Many countries require websites to be accessible. WCAG 2.1 Level AA is typically the legal standard for compliance with laws like the ADA (US), Accessibility for Ontarians with Disabilities Act (Canada), and EU Web Accessibility Directive.