WCAG Color Contrast Requirements: A Complete Guide

Light gray text looks sleek. Minimal. Modern. Designers gravitate toward it.

And then someone has to point out that nobody can read it.

The Actual Problem

People with low vision exist. People with colorblindness exist. People trying to read their phone while walking outside exist. If your text doesn't have enough contrast against the background, all these people struggle.

Think about placeholder text on a contact form. #CCCCCC on white. Barely readable in good lighting. Now imagine someone with aging eyes trying to read it. Or someone outside on a sunny day.

Not everyone can see light gray.

The Rule Is 4.5:1

WCAG says regular body text needs a 4.5:1 contrast ratio. That's the brightness difference between the text color and background color. Don't ask me about the math—it involves luminance calculations and my eyes glaze over. The point is there's a number and you need to hit it.

Large text (think 18 pixels or bigger, or 14 pixels if it's bold) can get away with 3:1. UI stuff like button borders and icons also just need 3:1.

That's for "Level AA" compliance, which is what lawyers and courts care about. There's also Level AAA at 7:1, but almost nobody bothers with that.

Colors That Keep Failing

That light gray everyone loves? #999999 on white is only 2.5:1. Fails.

You need to go darker. #767676 barely passes at 4.6:1. Visually? Almost identical. Legally and practically? Big difference.

color: #999999; /* nope */
color: #767676; /* barely */
color: #595959; /* comfortable margin */

Placeholder text is a disaster area. Browser defaults are usually too light. #CCCCCC placeholders hit around 1.6:1 contrast. Might as well be invisible.

::placeholder {
  color: #757575; /* actually readable */
}

And then there's text on images. You slap some white text over a photo, and half the photo is light-colored, and now your text is unreadable over those parts. You either need a dark overlay behind the text, a text shadow, or—hot take—maybe just don't put text on busy images.

How to Check

Chrome DevTools does it automatically now. Inspect any text, look at the color, and it shows the contrast ratio with a pass/fail indicator. Firefox does something similar.

Or just squint. Seriously. Squint at your screen. If the text disappears, contrast is too low. Not scientific, but it's a quick gut check.

For checking a whole site at once, ClearA11y scans every element and flags contrast failures. Faster than inspecting things one by one.

"But My Brand Colors"

Yeah, I know. The brand orange doesn't pass against white. The signature teal looks muddy when you darken it enough.

Options: use the brand color for big splashes—headers, buttons where the text is large—and use properly contrasting colors for body text. Or talk to your designer about adjusting the palette. Or use the brand color as an accent and put readable text next to it instead of on it.

What you can't do is ship unreadable text and hope nobody notices. People notice. And increasingly, lawyers notice.

Check contrast when picking colors, not after the site is built. Way easier to fix at the design stage than after everything's coded.