Color Contrast Checker

Check the WCAG contrast ratio between any text and background color, and see at a glance which AA and AAA levels pass.

Readable color, measured against WCAG

Contrast is the difference in brightness between text and its background. Too little and the words disappear for many readers. This checker gives you the exact ratio and tells you instantly whether the pair meets the Web Content Accessibility Guidelines for each text size and level.

The thresholds

  • AA Normal — at least 4.5:1, the baseline for body text.
  • AA Large — at least 3:1 for large or bold text.
  • AAA Normal — at least 7:1, the enhanced standard.
  • AAA Large — at least 4.5:1 for large text.

Frequently asked questions

What is a good contrast ratio?

WCAG sets the bar at 4.5:1 for normal text and 3:1 for large text to meet AA, the most common legal standard. For the stricter AAA level, aim for 7:1 normal and 4.5:1 large. Higher ratios are easier to read for everyone.

What counts as 'large' text?

Large text is roughly 18pt (24px) or larger, or 14pt (about 19px) bold and up. Because bigger letters are easier to read, they're allowed a lower contrast ratio than body text.

How is the ratio calculated?

It uses the WCAG formula: each color's relative luminance is computed from its RGB channels, then the ratio is (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical) to 21:1 (black on white).

Why does contrast matter?

Low-contrast text is hard to read for people with low vision, color blindness, or anyone on a bright screen outdoors. Meeting WCAG contrast makes your site more usable and is often a legal accessibility requirement.

Is my data private?

Yes. The ratio is computed entirely in your browser with plain math. No colors are uploaded or stored.