Color Contrast Checker

Test your color combinations against WCAG accessibility standards — with live preview and automatic fix suggestions.

💡 Pick a text color and a background color. The contrast ratio and WCAG AA/AAA results update live. If a check fails, click a suggested color to fix it instantly.

Contrast Ratio
3.67:1
Normal text
Below 24px (or below 18.5px bold) — AA requires 4.5:1, AAA requires 7:1
✗ AA Fail✗ AAA Fail
Large text
24px and above (or 18.5px bold) — AA requires 3:1, AAA requires 4.5:1
✓ AA Pass✗ AAA Fail
UI components & graphics
Buttons, form borders, icons — AA requires 3:1
✓ AA Pass
Suggested fixes

Same hue and saturation, lightness adjusted until the check passes. Click to apply.

Live preview

This is normal body text at 16px. It should stay comfortable to read for long paragraphs — most content on the web looks like this.

Large heading text

Button component
#6b7280/#111827

What is a Color Contrast Checker?

A color contrast checker measures the difference in luminance between two colors — typically text and its background — and expresses it as a ratio from 1:1 (identical colors) to 21:1 (black on white). This ratio determines whether the combination is readable for people with low vision, color blindness, or anyone viewing a screen in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum ratios that websites must meet to be considered accessible, and in many countries these requirements are part of legislation such as the ADA in the United States or the European Accessibility Act.

WCAG AA vs AAA: What's the Difference?

WCAG defines two conformance levels for contrast. Level AA — the standard most laws and audits require — demands a ratio of at least 4.5:1 for normal text and 3:1 for large text (24px+, or 18.5px+ bold) and UI components. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text, recommended for content aimed at users with more severe vision impairments. Most projects target AA as the baseline and apply AAA to critical content like legal text or healthcare information.

How is the Contrast Ratio Calculated?

The WCAG formula first converts each color to its relative luminance — a measure of perceived brightness that weights green more heavily than red or blue, because human eyes are most sensitive to green. Each RGB channel is gamma-corrected, then combined as 0.2126×R + 0.7152×G + 0.0722×B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. This tool runs the exact formula in your browser — no data ever leaves your device.

Tips for Accessible Color Design

  • Don't rely on color alone — pair it with icons, underlines, or labels for states like errors
  • Test both light and dark themes: a palette that passes in one often fails in the other
  • Grey text on white needs to be #767676 or darker to pass AA
  • Check hover, focus, and disabled states too — they must meet 3:1 for UI components
  • Use the suggested fixes in this tool to keep your brand hue while adjusting lightness