Home / Contrast Checker

Color Contrast Checker

Test WCAG accessibility compliance. AA & AAA contrast ratios in real time.

The WCAG contrast ratio measures the luminance difference between text and its background on a scale from 1:1 to 21:1. WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text; Level AAA raises those thresholds to 7:1 and 4.5:1.

Advertisement
Sample Text Large
This is sample body text to preview contrast.
5.21
Contrast Ratio
AA (Normal)
Pass — 4.5:1 required
AA (Large)
Pass — 3:1 required
AAA (Normal)
Fail — 7:1 required
AAA (Large)
Pass — 4.5:1 required
Advertisement

Understanding WCAG Contrast Standards

📏 What is Contrast Ratio?

Contrast ratio measures the difference in luminance between two colors. The scale ranges from 1:1 (same color) to 21:1 (black on white). Higher ratios mean easier readability.

🏆 WCAG Levels Explained

🔤 What Counts as "Large Text"?

WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (18.66px) bold. If text is below that threshold, it falls under "Normal" requirements.

💡 Pro Tips for Better Contrast

🔗 Related Tools

Try the Palette Generator for harmonious color schemes, and the Color Picker to find perfect colors.

Frequently asked questions

What is a good contrast ratio for body text?

For body text, aim for at least 4.5:1, the WCAG 2.2 AA minimum for normal-size text. Many accessibility teams target 7:1 for long-form reading. A ratio of 3:1 is not enough for paragraph text — it only satisfies the large-text and UI-component rules.

Does a 4.5:1 ratio apply to buttons and borders?

No. Buttons, borders, icons, and other essential UI graphics fall under WCAG 1.4.11, which requires 3:1 against adjacent colors. The 4.5:1 requirement in 1.4.3 covers text; large text may use 3:1.

Is contrast ratio always the same as perceived readability?

Close, but not identical. The ratio uses relative luminance and ignores font weight, letter spacing, and ambient light. A 4.5:1 pair in a thin 12px typeface can read worse than a 4:1 pair in a heavy 20px one, so treat the minimum as a floor.

Why does black on white score 21:1 and not 100:1?

The scale is capped by the formula (L1 + 0.05) / (L2 + 0.05). With black at luminance 0 and white at 1, the result is 1.05 / 0.05 = 21. There is no higher value in WCAG, which is why 21:1 is the practical maximum.

Do transparency and opacity affect the ratio?

Yes. WCAG is evaluated on the final rendered colors, so a 60% opaque overlay over a background must be resolved to one solid color first. Blend the alpha channel over the layer beneath it, then test the resulting pair.