Color Contrast Checker - WCAG 2.2 Compliance Tool

🎨 Color Contrast Checker

WCAG 2.2 Compliant • Instant AA/AAA Ratings • Color Blindness Simulation

7.15
Contrast Ratio
WCAG AA - Normal
✓ PASS (4.5:1)
WCAG AA - Large
✓ PASS (3:1)
WCAG AAA - Normal
✓ PASS (7:1)
WCAG AAA - Large
✓ PASS (4.5:1)

Live Preview

Normal Text
The quick brown fox jumps over the lazy dog.
Large Text
Heading text example for readability testing.

What is a Color Contrast Checker?

A color contrast checker is a web accessibility tool that calculates the contrast ratio between text (foreground) and background colors. This ratio, expressed as a number like 4.5:1 or 7:1, determines whether your color combination meets WCAG (Web Content Accessibility Guidelines) standards for readability.

For users with visual impairments, low vision, or color blindness, adequate contrast is essential for reading digital content. This tool instantly evaluates your colors against WCAG 2.2 requirements and provides actionable recommendations.

Understanding WCAG 2.2 Contrast Requirements

The Web Content Accessibility Guidelines define three conformance levels:

  • Level AA (Minimum): Requires 4.5:1 contrast for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold)
  • Level AAA (Enhanced): Requires 7:1 contrast for normal text and 4.5:1 for large text
  • UI Components (WCAG 2.1+): Requires 3:1 contrast for interactive elements like buttons, form inputs, and icons

Most websites aim for Level AA compliance as it balances accessibility with design flexibility. Government and educational websites often target AAA for maximum inclusivity.

Why Color Contrast Matters for Web Accessibility

Poor contrast affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) who have some form of color vision deficiency. Additionally, users with:

  • Low vision or partial sight (246 million people worldwide)
  • Age-related visual decline (nearly everyone over 40)
  • Temporary impairments (screen glare, eye fatigue)
  • Situational limitations (bright sunlight on mobile devices)

Beyond accessibility, proper contrast improves conversion rates, reduces bounce rates, and enhances overall user experience for everyone.

Common Color Contrast Mistakes to Avoid

1. Gray Text on #fff; Backgrounds

Light gray (#999999) on #fff; (#fff) produces only a 2.8:1 ratio—failing WCAG AA. Use darker grays (#767676 or darker) for body text.

2. Colored Text on Colored Backgrounds

Red text (#FF0000) on blue backgrounds (#0000FF) may seem vibrant but often fails contrast checks. Always verify with a contrast checker first.

3. Thin Font Weights

Ultra-light or thin fonts (font-weight: 100-300) require higher contrast ratios to remain readable. Avoid using them for body text.

4. Gradient Backgrounds

Text over gradients may pass contrast on one end but fail on the other. Test both the lightest and darkest gradient stops.

Advanced Features: Color Blindness & AI Suggestions

Our tool goes beyond basic contrast checking with:

  • Color Blindness Simulation: See how your colors appear to users with Protanopia, Deuteranopia, Tritanopia, and other vision deficiencies
  • AI-Powered Fix Suggestions: Automatically generates accessible alternatives when your colors fail WCAG standards
  • Live Preview: Real-time rendering of text at multiple sizes to assess readability
  • Multiple Input Formats: Enter colors as HEX, RGB, or HSL—whichever you prefer

Frequently Asked Questions

🤔 What is a good contrast ratio for text?
For WCAG AA compliance, aim for at least 4.5:1 for normal text and 3:1 for large text. For enhanced accessibility (AAA), target 7:1 for normal text. Black on #fff; produces the maximum ratio of 21:1, while #fff; on black also achieves 21:1.
🤔 How do I fix colors that fail the contrast check?
Darken the text color or lighten the background color (or vice versa) until you achieve the required ratio. Use our AI suggestions feature which automatically generates accessible alternatives while maintaining your color palette's intent.
🤔 What's the difference between WCAG AA and AAA?
WCAG AA is the minimum legal standard requiring 4.5:1 contrast; AAA is an enhanced standard requiring 7:1 contrast. Most commercial websites target AA compliance, while government and educational sites often aim for AAA to ensure maximum accessibility.
🤔 Do images and graphics need contrast checking?
Yes, WCAG 2.1 requires 3:1 contrast for UI components like icons, buttons, and form inputs. Meaningful graphics and images of text must also meet contrast requirements. Decorative images are exempt but should still maintain good visibility.
🤔 Can I check contrast on mobile devices?
Absolutely! This tool is fully responsive and works seamlessly on mobile devices. Checking contrast on mobile is especially important since screen glare and outdoor viewing can reduce perceived contrast significantly.
🤔 Why do some color combinations fail for colorblind users but pass WCAG?
WCAG contrast ratios measure luminance (brightness) difference, not hue difference. Colors like red and green may have adequate brightness contrast but be indistinguishable to colorblind users. Use our colorblindness simulation to test beyond WCAG requirements.
🤔 What colors always pass WCAG AA?
Black text (#000000) on #fff; backgrounds (#fff) always passes with a 21:1 ratio. Other reliable combinations include dark gray (#595959 or darker) on #fff;, #fff; on dark blue (#1e3a8a or darker), and #fff; on dark green (#166534 or darker).
🤔 Does font size affect contrast requirements?
Yes, large text (18pt+ or 14pt+ bold) only requires 3:1 contrast for AA and 4.5:1 for AAA. This is because larger text is inherently more readable, even with lower contrast. However, we recommend using higher contrast when possible for optimal readability.