Contrast Ratios Explained With Real Homepage Examples

There’s a number hiding in every pair of colors on your homepage, and most people who chose those colors have never calculated it. It’s called the contrast ratio, and it’s the answer to a simple question: how different is the brightness of the text from the brightness of the background?

The scale runs from 1:1 to 21:1. White text on a white background is 1:1, which is to say invisible. Black text on a white background is 21:1, the maximum. Everything else falls in between. The WCAG guidelines, which are the standard everyone uses whether they know it or not, say that normal-sized body text should hit at least 4.5:1, and large text, roughly headline size, should hit at least 3:1. Those thresholds weren’t picked to make designers miserable. They come from research on how vision degrades, with age and with common conditions like low vision and color blindness. Below those ratios, a meaningful fraction of your visitors are squinting.

Here’s the thing that surprised me when I started running audits on real homepages: almost nobody fails on their main headline. The headline is where the founder’s attention went, and it’s usually dark and bold. The failures cluster in the places nobody was looking. The subheadline under the hero, set in a fashionable light gray, maybe #999 on white, which is about 2.8:1. The placeholder text in the email capture form. The fine print near the pricing. The navigation links when the page has a photographic background behind them. The footer, which on many sites is a study in gray-on-slightly-darker-gray.

Why does this happen? I think it’s because low contrast reads as sophistication to designers. Full black on full white feels loud, like a legal document. Softening the text to gray makes the page feel calm and expensive. And on the designer’s calibrated monitor, in a dark office, at age twenty-eight, the gray text is perfectly legible. The problem is that your visitors are not that designer. They’re reading on a phone in sunlight, on a cheap laptop with the brightness turned down to save battery, or with fifty-five-year-old eyes. Contrast that’s marginal in ideal conditions is gone in real ones.

The pattern I see most often on homepages is what I’d call the confidence gradient. The pitch, the part the company most wants you to read, is high contrast. Then contrast falls off exactly in proportion to how much the company would rather you skim: feature descriptions lighter, testimonials lighter still, the terms link at the bottom nearly ghostly. The irony is that the low-contrast text often includes the things that close a sale. The line that says “no credit card required.” The shipping policy. The phone number. If a hesitant buyer can’t comfortably read the sentence that would have removed their hesitation, you’ve lost them, and no analytics tool will tell you why.

There’s a second failure mode that’s sneakier: text on images. A white headline over a photograph has no single contrast ratio, because the background varies pixel by pixel. Over the dark part of the photo it’s fine; over the sky it disappears. Designers handle this with overlays, a translucent dark layer between photo and text, and the honest ones make the overlay dark enough to guarantee the ratio everywhere. The dishonest ones make it barely-there because it “kills the photo,” and then the readability of the headline depends on which crop of the image the CDN served today.

The fix is not to abandon gray. You don’t need 21:1; you need 4.5:1, and there’s a lot of room under that ceiling for tasteful, muted text. On a white background, #767676 passes for body text and still reads as gray. #595959 passes comfortably. What fails is the #aaa and #bbb territory that so many templates ship with. The difference between failing gray and passing gray is almost invisible to a designer comparing swatches, and enormous to someone actually trying to read a paragraph.

You can check any pair of colors in seconds. Browser developer tools will show you the ratio when you inspect text, and any contrast checker will do the arithmetic if you paste in two hex codes. When I built GazeSite I made contrast one of the first things the scan looks at, partly because it’s so mechanically checkable and partly because it’s the accessibility problem with the highest ratio of impact to effort. Changing a hex code in a stylesheet is a five-minute fix. It’s rare that five minutes of work makes a page readable to millions more people, but this is one of those cases.

The deeper point is that contrast is a proxy for a question you should be asking about every element on your homepage: did we actually try to read this, or did we only look at it? Pages get looked at in design reviews. They get read by customers. A lot of what’s wrong with homepages comes down to that gap, and contrast is simply the place where the gap becomes measurable.