What contrast ratio do I need?

For WCAG AA, aim for at least 4.5:1 for normal text and 3:1 for large text or interface components. AAA raises normal text to 7:1.

Does contrast apply to icons and buttons?

Yes. Meaningful graphics and the boundaries of interactive controls should meet at least 3:1 against their surroundings so they are perceivable.

Does the contrast checker send my colors anywhere?

No. The ratio is calculated locally in your browser and nothing is uploaded.

Explainer1 min readUpdated June 29, 2026

What is color contrast (and the WCAG ratios)?

Short answer

Color contrast measures how much text stands out from its background, expressed as a ratio from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text so it stays readable, including for low-vision users.

Contrast as a ratio

Contrast is calculated from the relative luminance of two colors and written as a ratio. Pure black on pure white is the maximum, 21:1; two similar shades might be only 1.5:1 and very hard to read.

The WCAG thresholds

4.5:1 — minimum for normal body text (Level AA)
3:1 — minimum for large text, roughly 18.66px bold or 24px regular (Level AA)
7:1 — the stricter Level AAA target for normal text
3:1 — also the minimum for interactive controls and meaningful graphics

WCAG contrast minimums (higher is more readable)

AA large3:1

AA normal4.5:1

AAA normal7:1

Black on white21:1

21:1 is the maximum possible. Normal body text should reach at least 4.5:1.

Contrast is an accessibility requirementSufficient contrast helps people with low vision, color vision differences, and anyone reading on a glary screen. It is part of meeting WCAG 2.2 AA.

Try it: Color Contrast CheckerCheck the contrast ratio between two colors against WCAG thresholds locally.Open tool

A common mistake

Light gray text on white is a frequent failure. It can look elegant in a design mockup but drop below 4.5:1, making it hard to read on phones and in bright light. Test real text colors, not just the headline.