WCAG Color Contrast for Designers

If your text fails WCAG AA contrast, an estimated 285 million visually impaired people can't read it. Plus you're on increasingly shaky legal ground in the EU and US. The good news: the rule is simple.

The 4.5:1 rule

Body text must have a contrast ratio of at least 4.5:1 against its background to pass WCAG AA. Large text (24px+ regular or 18px+ bold) has a lower bar of 3:1.

For AAA conformance: 7:1 for body, 4.5:1 for large text.

How contrast ratio is calculated

WCAG uses relative luminance — convert each color to a luminance value (0 = black, 1 = white) using a specific formula, then compute (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

You don't need to do the math — use our free contrast checker to drop in any two colors and see the ratio.

Common failure cases

• Light grey on white — #999 on #fff = 2.85 (fails). #767676 on #fff = 4.54 (passes).
• White on yellow — almost always fails. Use dark text on yellow.
• Coloured links in body text — most blue links pass against white but fail against light grey. Test the actual surrounding background.
• Brand colors that look great — they often fail. Add an off-white background or darken the text.

Picking accessible color pairs

Three reliable patterns:

1. Dark on light — #1f2937 on #fff = 14:1 (perfect).
2. White on dark — #fff on #1f2937 = 14:1 (perfect).
3. Dark on accent — #1f2937 on #fbbf24 = 9:1 (perfect for buttons).

Beyond text

WCAG 2.1 also requires 3:1 for non-text elements (buttons, focus rings, form borders). The checker handles both.

Wallpapers that won't fight your widgets

If you're a designer setting wallpapers behind clock widgets and notifications, pick wallpapers with contrast under 5:1 in the widget zones. Our Gaussian blur tool can soften busy areas of any wallpaper for better widget readability.

Try our free tools

Most of these guides pair with a hands-on tool you can use right now — no sign-up required for the first run:

• Image resizer — pixel-perfect downscale + upscale.
• Convert to WebP — 30-50% smaller files than JPG.
• Background remover — one-click cutout, transparent PNG.
• Favicon generator — every browser size from one source.
• Social-media resizer — every platform's exact dimensions.
• Bulk processing — apply any tool to up to 200 images at once.

Browse the full tool catalog.