Color Contrast Checker

How to check color contrast

Contrast is the difference in perceived brightness between text and its background, measured as a ratio from 1:1 to 21:1. The Web Content Accessibility Guidelines (WCAG) set minimum ratios so text stays readable for people with low vision, aging eyes, or glare-heavy phone screens — which is nearly everyone, some of the time.

1. Pick your colors — use the native pickers for speed or type exact hex codes for precision.
2. Read the ratio. The big number is your WCAG contrast ratio, computed with the real relative-luminance formula.
3. Check the badges. Four pass/fail verdicts: AA and AAA, each for normal and large text.
4. Eyeball the preview. Numbers are the rule, but the live sample shows what your pair actually looks like.

Why gray text keeps failing

The most common failure is medium gray on white: #777777 scores about 4.48:1 — a hair under the 4.5:1 AA bar for normal text. Nudge it to #767676 or darker and it passes. The same gray at large/bold sizes passes AA large (3:1) comfortably, which is why headings get away with lighter colors.

Contrast is necessary, not sufficient

A passing ratio doesn't guarantee everyone can use your design. Red/green pairs can pass the math while remaining indistinguishable to color-blind users, and thin fonts at small sizes strain eyes even at 7:1. Treat the ratio as the floor — then never rely on color alone to carry meaning.

What is a good contrast ratio for text?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA — the stricter level — requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

Text at least 18pt (24px), or at least 14pt (18.66px) if it is bold. Everything smaller is normal text and needs the higher 4.5:1 ratio.

Why is my gray text failing?

Mid-grays on white — like #777777 at about 4.48:1 — sit just under the 4.5:1 AA bar for normal text. Darken the gray slightly (to about #767676 or darker) or make the text large or bold to pass.

How is the contrast ratio calculated?

Each color's relative luminance is computed from its sRGB channels using the WCAG formula, then the ratio is (lighter + 0.05) / (darker + 0.05). It ranges from 1:1 (identical colors) to 21:1 (black on white).

Does this work for color blindness?

Partially. A high contrast ratio helps everyone, but some color pairs that pass the ratio check are still hard to tell apart for color-blind users (red/green especially). Avoid relying on color alone to convey meaning.

Is my input sent anywhere?

No. The calculation runs entirely in your browser with JavaScript. Nothing is uploaded or stored.