Contrast for Readability, Not Just Accessibility

Most people who know about contrast ratios learned about them from an accessibility checklist. WCAG says normal-size text should have a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. So designers treat contrast as a compliance question: does the gray we picked pass the checker or not? If it passes, ship it.

I think this framing gets the whole thing backwards. Contrast isn’t primarily an accessibility feature. It’s a readability feature. Accessibility guidelines just happen to be the only place where anyone wrote the requirement down.

Here’s the thing the checklist framing hides: contrast doesn’t have a threshold below which reading breaks and above which reading is fine. It’s a gradient. As contrast drops, every reader slows down. Their eyes work harder to resolve the letterforms. They skip more, retain less, and get tired faster. Readers with low vision hit the wall first, which is why the guidelines exist. But everyone is on the same slope. A 25-year-old with perfect eyes reading light gray text on white is doing the same extra work, just with more margin before it becomes impossible.

And real reading conditions eat that margin quickly. The contrast checker assumes a calibrated screen in a dim room. Your actual reader is on a phone, outside, with sunlight hitting the glass. Or they turned their brightness down to save battery. Or the screen is three years old and dimmer than it used to be. Or they have night mode shifting everything warm. Each of these conditions subtracts effective contrast. Text that scores 4.6 to 1 in the checker can be genuinely hard to read on a train. Text at 12 to 1 survives all of it.

So why is low-contrast text everywhere? Because designers spend all day looking at their own site on a good monitor, and at that viewing distance, in that light, pure black on white can feel harsh. Softening the text to a mid-gray makes the mockup look calmer and more refined. The designer is optimizing for how the page feels to glance at, and the reader needs it optimized for how it feels to read for three minutes. Those are different things. A page can look elegant in a screenshot and be exhausting as an actual reading surface.

There’s a simple way to think about the tradeoff. The aesthetic gain from lowering contrast is small and accrues mostly to the person who made the page. The readability loss is real and accrues entirely to the reader. That’s a bad trade almost every time. If a design feels harsh at full contrast, the fix is usually somewhere else: the font is too thin, the text is too small, the background is too bright, the line spacing is too tight. Contrast is the wrong knob, but it’s the easiest knob, so it’s the one that gets turned.

The place this hurts most is body text, and body text is exactly where designers feel safest going gray. Headlines usually stay dark because they’re the decoration. The paragraphs underneath, the part that actually carries the information someone came for, get set in #767676 or lighter, because paragraphs are treated as texture rather than content. If you believe your words matter, this is exactly backwards. The text people need to read for the longest should be the easiest text on the page to read.

None of this means everything must be black on white. Dark charcoal on off-white reads beautifully. What it means is that you should aim well above the legal minimum for anything longer than a label. The 4.5 to 1 ratio is a floor, and floors are for standing on, not for living at. When I built the readability checks in GazeSite, I made it look at contrast alongside sentence length and font size, not off in a separate accessibility bucket, because in practice they fail together: the sites with faint gray paragraphs are usually the same sites with long sentences in small type. The whole page whispers, and then the owner wonders why nobody finishes reading it.

If you want a cheap test, don’t open a contrast checker first. Take your phone outside on a bright day and read your own pricing page. Turn brightness to half. If you find yourself tilting the screen or shading it with your hand, your visitors are doing that too, except they don’t care enough to persist. They just leave.

Contrast is one of the few things in design where the honest answer is boring: more is better, up to plain dark text on a plain light background, and the exceptions are rare. The checklist got the direction right. It just set your ambition too low. Don’t ask whether your text passes. Ask whether it’s effortless.