Text Contrast on Websites: How to Check It and How Much You Need

Gray 8-point type on a light gray background is a favorite trick of "elegant" design and the reader's worst enemy. By WHO estimates, roughly one person in three lives with a vision impairment, and contrast sensitivity declines with age for everyone. So the contrast between text and background isn't a matter of taste — it's a measurable parameter with a standard.

What's measured and what the standards are

Contrast is expressed as a ratio of the luminance of text and background — for example, "4.5:1". White on black gives the maximum 21:1. The WCAG standard (Web Content Accessibility Guidelines) requires:

• 4.5:1 — for ordinary text (level AA, the baseline requirement);
• 3:1 — for large text: from 24px regular or from 18.66px bold;
• 7:1 — for ordinary text at the highest level, AAA.

Note that "gray on white" easily fails the check: the popular #999999 on white gives just 2.85:1 — below the requirement, even though it looks "fine" on a good monitor. On a budget screen in bright sun, text like that simply vanishes.

Why your site needs it, business-wise

First, accessibility is about people with weakened vision reading your site on the move, in bright light, on an aging screen. Second, search engines increasingly weigh how comfortable a page is to use: contrast is part of the accessibility checks that search engines openly recommend to developers. Third, low-contrast gray boxes "don't read" in printouts and screenshots — and that's your content too.

How to check your colors in a minute

Open the contrast checker, paste the text color and the background color (or pick them with an eyedropper) — you'll see the ratio and the AA/AAA verdict at once, for both ordinary and large text. If a color fails, the best move isn't to darken it blindly but to take a darker shade of the same color: in the color picker you can pull down the brightness and immediately recheck the contrast.