Color Contrast and Accessibility: The WCAG Rules in Plain English

Light grey text on a white background looks elegant in a mockup and is invisible to millions of real users. Color contrast is the most common — and most fixable — accessibility failure on the web.

What "contrast ratio" means

Contrast is measured as a ratio between the brightness of your text and its background, from 1:1 (identical, invisible) to 21:1 (black on white). The contrast checker computes this exact ratio for any two colors and tells you instantly whether it passes.

The thresholds you must hit

WCAG AA (the legal baseline in most countries): 4.5:1 for normal text, 3:1 for large text (≥18pt or 14pt bold). WCAG AAA (best practice): 7:1 normal, 4.5:1 large. If you only remember one number, make it 4.5:1.

Why it matters beyond compliance

Good contrast helps everyone: users with low vision, color blindness, older eyes, cheap screens, and anyone reading on a phone in sunlight. It's also increasingly a legal requirement — accessibility lawsuits cite contrast constantly.

How to fix failing text

Don't just darken the text randomly — adjust methodically. Drop the lightness of your text color (or raise the background's) until the checker passes. Generate a darker shade that stays on-brand with the shades & tints generator rather than jumping to pure black.

Common traps

Placeholder text, disabled buttons, text over images, and light-grey timestamps are the usual offenders. Brand colors fail too — many vivid brand hues don't pass on white. Test every text-on-color combination in your design system once, and bake the passing values into your palette.