Color Contrast Checker: Test WCAG Accessibility Compliance

Low contrast text is one of the most common accessibility failures on the web. According to the WebAIM Million report, over 80% of home pages have detectable WCAG contrast failures. Poor contrast does not just affect people with vision impairments — it affects everyone reading a screen in bright sunlight, on a low-quality monitor, or while tired.

What is Color Contrast Ratio?

The contrast ratio measures the relative luminance difference between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).

The formula uses relative luminance, which accounts for how human eyes perceive different wavelengths. Green light appears brighter than blue light at the same intensity, so the calculation weights channels differently.

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

Where L1 = lighter color's relative luminance
      L2 = darker color's relative luminance

You do not need to calculate this manually. Our tool does it instantly for any two colors.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define two conformance levels for contrast:

Level AA (Minimum)

Element	Required Ratio
Normal text (under 18px)	4.5:1
Large text (18px+ bold, or 24px+)	3:1
UI components and graphics	3:1

Level AAA (Enhanced)

Element	Required Ratio
Normal text (under 18px)	7:1
Large text (18px+ bold, or 24px+)	4.5:1

AA is the standard that most organizations target. AAA is recommended for long-form reading content like articles and documentation.

How to Use Our Contrast Checker

Enter a foreground color (text) using the color picker or a HEX value
Enter a background color using the color picker or a HEX value
View the contrast ratio calculated in real time
Check the pass/fail results for WCAG AA and AAA at both normal and large text sizes
See a live preview of how your text looks on the background

The tool updates instantly as you adjust either color, so you can fine-tune your values until you reach the desired compliance level.

Common Contrast Failures

Light Gray Text on White

#999999 on #FFFFFF → 2.85:1 (Fails AA)
#767676 on #FFFFFF → 4.54:1 (Passes AA)

Many designers use #999 for secondary text without realizing it fails AA. The darkest gray that still feels “light” while passing AA on white is approximately #767676.

Brand Colors as Text

#6750A4 on #FFFFFF → 5.36:1 (Passes AA)
#E8DEF8 on #FFFFFF → 1.45:1 (Fails AA)

Primary brand colors often pass as text on white, but lighter tints used for secondary elements frequently fail. Always verify before using light palette colors for text.

Colored Backgrounds

#FFFFFF on #6750A4 → 5.36:1 (Passes AA)
#E8DEF8 on #6750A4 → 3.70:1 (Passes AA large text only)

White text on your primary color usually works, but pairing two colors from the same palette can produce surprisingly low contrast.

Tips for Meeting Contrast Requirements

Start with Accessible Defaults

Build your color system around accessible pairings from the start. It is far easier than retrofitting later.

Body text: Use a near-black (#1C1B1F) on your background, not pure black
Background: A tinted off-white (#FFFBFE) pairs well with most text colors
Links: Ensure link color has 4.5:1 against the background and 3:1 against surrounding text

Use HSL for Quick Adjustments

If a color pair fails contrast, convert the text color to HSL and reduce the lightness value. This darkens the color while preserving its hue and saturation.

Failing:  hsl(261, 34%, 72%) on white → 2.8:1
Adjusted: hsl(261, 34%, 48%) on white → 5.4:1

Test All States

Check contrast for every visual state:

Default text on default background
Hover states
Placeholder text in inputs
Disabled state text
Error messages
Text on images or gradients

Do Not Rely on Color Alone

Even with perfect contrast, do not use color as the only way to convey information. Add icons, underlines, or labels so colorblind users can understand the meaning.

Frequently Asked Questions

Does WCAG apply to images of text? Yes. If text is rendered as an image (logos excluded), it must meet the same contrast requirements. This is one reason to use real text over image-based text.

What about text on gradients or images? Check contrast at the worst-case point — where the background is closest in luminance to the text. For images, consider adding a semi-transparent overlay behind the text.

Is 4.5:1 enough for all users? 4.5:1 is the minimum for AA compliance. Users with moderate vision impairments benefit from higher ratios. For body text in articles and documentation, targeting AAA (7:1) improves readability for everyone.

Do decorative elements need to meet contrast ratios? Purely decorative elements that convey no information are exempt. However, if a UI component like an icon or border communicates meaning or indicates a state, it must meet the 3:1 ratio for non-text elements.

What about dark mode? The same WCAG ratios apply to dark mode. Common mistakes include using pure white text on pure black (which can cause halation) and using low-saturation colors that lose contrast on dark backgrounds. Test your dark mode palette separately.

Try our free Color Contrast Checker to verify WCAG accessibility compliance instantly.