Contrast Checker

Check if your color combinations meet WCAG accessibility standards

Select Colors

Foreground (Text Color)

Background Color

Contrast Results

Contrast Ratio

21:1

Excellent

WCAG 2.1 Compliance

Level AA

Normal Text (≥ 4.5:1)

Pass

Large Text (≥ 3:1)

Pass

Level AAA

Normal Text (≥ 7:1)

Pass

Large Text (≥ 4.5:1)

Pass

Preview

Normal text (16px)

This is normal body text that you might use in your design.

Large text (24px)

Headlines and large text are easier to read.

WCAG Guidelines

• Normal text: Regular body text (less than 18pt or 14pt bold)
• Large text: Headlines and emphasized text (18pt+ or 14pt+ bold)
• Level AA: Minimum standard for web accessibility
• Level AAA: Enhanced standard for maximum accessibility

How It Works

Contrast Ratio Calculation

The contrast ratio is calculated following the WCAG 2.1 specification. First, the relative luminance of the foreground and background colors is computed, then the formula (L1 + 0.05) / (L2 + 0.05) is applied, where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. The relative luminance calculation accounts for the varying sensitivity of the human eye to different wavelengths in the sRGB color space, applying a weighted average across the red, green, and blue channels (with weights of approximately 0.2126, 0.7152, and 0.0722 respectively).

WCAG 2.1 Standard Overview

Level AA (Minimum Standard)

Normal text requires a contrast ratio ≥ 4.5:1, and large text requires ≥ 3:1. This is the minimum accessibility requirement for public websites mandated by law in most countries.

Level AAA (Enhanced Standard)

Normal text requires a contrast ratio ≥ 7:1, and large text requires ≥ 4.5:1. This provides stronger readability assurance for users with visual impairments.

Normal Text

Text with a font size smaller than 18pt (or 14pt bold). Since the text is smaller, a higher contrast ratio is needed to ensure readability.

Large Text

Text with a font size ≥ 18pt (or ≥ 14pt bold). Larger text is easier to discern, so a lower contrast ratio is acceptable.

Usage Guide

Select Foreground Color

Use the color picker or enter a HEX value to set the text color (foreground).

Select Background Color

Set the background color in the same way. The contrast ratio is calculated automatically.

Check Compliance Results

Review the pass/fail status for WCAG AA and AAA levels, and see the live preview.

Adjust Until Compliant

If the check fails, adjust the foreground or background color until the required contrast ratio is met.

FAQ

Why doesn't my light text on a dark background pass the AA check?

Insufficient contrast. Light text on a dark background requires the same contrast ratio as dark text on a light background. Try using a brighter foreground color or a darker background color to increase the contrast.

Should I meet AA or AAA level?

For most websites, meeting AA level is the baseline requirement (legally mandated in some regions). AAA is an enhanced standard recommended for government, healthcare, and educational websites with higher accessibility demands. In practice, ensure all text passes at least the AA standard.

Does this tool calculate contrast the same way as browser developer tools?

Yes. This tool uses the colord library's a11y plugin, which strictly follows the WCAG 2.1 specification's mathematical formula. The results are consistent with the contrast checks in Chrome DevTools and Firefox Developer Tools.

How do I check text contrast on gradient backgrounds?

This tool currently only supports solid-to-solid color contrast checks. For gradient backgrounds, it's recommended to check the color point with the lowest contrast within the gradient, ensuring WCAG requirements are met even in the worst-case scenario.