What is a good color contrast ratio?

WCAG requires at least 4.5:1 for normal text and 3:1 for large text to meet AA (the common legal standard). For the stricter AAA level, you need 7:1 for normal text and 4.5:1 for large text. Higher ratios mean better readability.

What counts as 'large text'?

Large text is defined as 18.66px and bold, or 24px and larger regardless of weight. Because larger text is inherently easier to read, it is allowed a lower contrast threshold than normal body text.

How is contrast ratio calculated?

The tool computes the relative luminance of both colors using the official WCAG formula, then divides the lighter value plus 0.05 by the darker value plus 0.05. The result ranges from 1:1 (identical) to 21:1 (black on white).

Why does color contrast matter?

Sufficient contrast makes text readable for people with low vision or color-vision deficiency, and for everyone in bright sunlight or on poor screens. It is also a legal accessibility requirement in many regions under standards like the ADA and EN 301 549.

Does the checker update live?

Yes. Pick colors with the color pickers or type hex codes, and the contrast ratio, pass/fail badges and live text preview update instantly.

Color Contrast Checker

Remove Ads

Text color

Background color

Large sample text

Normal body text sample — the quick brown fox jumps over the lazy dog.

Contrast ratio

—

Standard	Normal text	Large text
WCAG AA	—	—
WCAG AAA	—	—

AA needs 4.5:1 (normal) / 3:1 (large ≥18.66px bold or 24px). AAA needs 7:1 / 4.5:1.

Remove Ads

Color Contrast Checker — Make Sure Your Text Is Readable by Everyone

Low-contrast text looks stylish in a mockup and becomes unreadable in the real world — for users with low vision, for anyone in bright sunlight, on a cheap monitor, or with a dimmed screen. This free tool measures the contrast ratio between any text and background color and tells you instantly whether it passes the WCAG AA and AAA accessibility standards, with a live preview so you can see the result as you tune it.

The Thresholds You Need to Hit

Standard	Normal text	Large text
WCAG AA (common legal minimum)	4.5:1	3:1
WCAG AAA (enhanced)	7:1	4.5:1

"Large text" means 18.66px bold or 24px regular and up. Most legal accessibility requirements — the ADA in the US, EN 301 549 in the EU — target AA, so 4.5:1 for body text is the number to remember.

How the Ratio Is Calculated

Contrast isn't about how different two colors look to you — it's a precise measure of relative luminance. The tool applies the official WCAG formula: it converts each color to its luminance value, then computes (lighter + 0.05) ÷ (darker + 0.05). The scale runs from 1:1 (a color on itself) to the maximum 21:1 (pure black on pure white). Pale grey text on white, a common design mistake, often lands around 2:1 — well below the readable minimum.

Why Accessibility Contrast Is Not Optional

It's the law in many places — accessibility standards reference WCAG AA directly, and inaccessible sites face real legal risk.
It's a large audience — hundreds of millions of people have some form of color-vision deficiency or low vision.
It helps everyone — good contrast improves readability in sunlight, on old screens and for tired eyes.

Use the live preview to test your real color pairs, adjust until the badges turn green, and ship interfaces everyone can read. Pair it with our color palette generator and CSS gradient generator to build accessible designs from the start.