Color Contrast Checker

How to Use This Checker

1. Select or enter your foreground (text) color using the color picker or hex input field
2. Select or enter your background color using the same methods
3. Use the swap button to quickly reverse the foreground and background colors
4. View the live preview to see how both large and normal text appears with your color combination
5. Check the contrast ratio displayed prominently in the results section
6. Review all four WCAG compliance indicators to understand which standards your colors meet

What is WCAG Color Contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with moderately low vision or color deficiencies. The contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). This measurement helps designers create interfaces that are usable by the widest possible audience.

Meeting WCAG standards is not only good practice but often legally required for websites serving the public. In many countries, including the United States (ADA), European Union, and others, government websites and public services must meet accessibility standards. Poor contrast affects approximately 8% of men and 0.5% of women who have some form of color vision deficiency, plus millions more with age-related vision loss or situational impairments like screen glare.

WCAG 2.1 Contrast Requirements

• Level AA Normal Text: 4.5:1 minimum ratio required for standard body text under 18pt (or 14pt bold). This is the most common requirement for web content.
• Level AA Large Text: 3:1 minimum ratio for text 18pt and above (or 14pt bold and above). Larger text is inherently easier to read, so the requirement is lower.
• Level AAA Normal Text: 7:1 minimum ratio for enhanced accessibility. This stricter standard ensures readability for users with more significant vision impairments.
• Level AAA Large Text: 4.5:1 minimum ratio for large text under enhanced accessibility guidelines.

How Contrast Ratio is Calculated

The contrast ratio formula uses relative luminance values:

Contrast = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color's luminance and L2 is the darker. Luminance is calculated from RGB values using the sRGB color space formula, which weights green (71.52%) more heavily than red (21.26%) and blue (7.22%) to match human visual perception. The 0.05 offset accounts for ambient light reflections on real screens.

Tips for Better Contrast

• Avoid using pure gray text (#808080) on white backgrounds - it often fails WCAG AA requirements
• Dark text on light backgrounds is generally easier to read for extended periods than light text on dark
• If your contrast is borderline, increase font weight or size to meet the large text threshold
• Test with actual users who have visual impairments to get real-world feedback
• Consider color blindness - never rely on color alone to convey important information
• Use high contrast for critical interface elements like error messages and call-to-action buttons
• Check contrast in different lighting conditions and on various devices

Common Color Combinations

• Black on White (21:1): Maximum contrast, always passes all WCAG levels
• Navy on White (~16:1): Excellent contrast while being softer than pure black
• White on Blue (~8.6:1): Commonly used for links and buttons, passes AA and AAA
• Gray on White (varies): Depends on shade - #595959 is the lightest gray that passes AA on white