Gray text is a business decision

In short: Low-contrast text is the most common accessibility problem on the web. WebAIM found it on 83.9% of the top million home pages this year. It usually gets approved on a large monitor by people who already know what the copy says, then read on a phone outdoors by people who don’t. Checking your own site takes a couple of minutes, and the fix is often a few color values.

Why designs end up gray

It usually happens in a design review. The mockup is on a big screen, the headline is near-black, and the body copy is a soft gray, around #999 on white, because black looked heavy next to the photos. It looks clean, and it gets approved.

The people in that review already know what the copy says, so nobody has to read it closely. The gray never really gets tested.

A few weeks after launch, the client checks the site on their phone at lunch, brightness down, and has trouble reading their own About page. That’s often when someone first notices.

Nielsen Norman Group’s Katie Sherwin covered the usual reasons for pale text in Low-Contrast Text Is Not the Answer: a cleaner look, a more premium feel, making secondary text recede, and copying big brands on the assumption they tested it. These are reasonable goals. Pale text isn’t a good way to get there, though.

Who it affects

WCAG, the standard most of the world uses, asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text (around 24px, or about 18.5px bold). #999 on white comes in at 2.85:1. The lightest gray that passes on white is #767676.

The W3C set the bar at 4.5:1 to account for the contrast sensitivity people lose with age and with moderately reduced vision. It also helps anyone reading in less than ideal conditions, for example:

• People over forty reading without their glasses.
• A budget phone in daylight, or any phone with the brightness down.
• Someone skimming on a commute.

On our own agency site, an audit earlier this year found that nearly nine in ten visits came from phones. A review monitor is a long way from how most people will see the site.

Research cited in Sherwin’s article also found that people trust hard-to-read text less. On a services site, that’s often the copy explaining why someone should hire you.

How common it is

WebAIM runs an automated accessibility check on the top one million home pages every year. In the 2026 report, low-contrast text was the most common issue, found on 83.9% of home pages, up from 79.1% the year before. The average home page had 34 instances.

On a typical page, those 34 are the small things: dates under articles, labels on cards, the copyright line, form hints, all set in the same light gray.

When I checked this site for this post, the article text passed, but some small dates, category labels and the footer line didn’t. We’ve fixed those.

What to use instead

Most of the reasons for gray text have a better option:

• Hierarchy. Make secondary text smaller, lighter in weight or set apart with spacing, and keep its color in a passing gray.
• A calm, premium feel. Space, a good typeface and fewer competing elements do more for this than pale text does.
• Dark designs. The same problem happens in reverse. Mid-gray on near-black fails as often, and I see it most on dark sites.
• Brand colors. Logos are exempt, but brand colors used for links or labels aren’t. Check them at the size they’re actually used.

Gray text is fine. Pick a few grays you’ve tested, and keep body copy comfortably above 4.5:1 rather than right at the line.

How to check your site

1. Open your homepage in Chrome, right-click any body text and choose Inspect.
2. Hover with the inspect tool. Click the arrow icon at the top of the DevTools panel, then hover over text on the page. The tooltip shows the contrast ratio, with a warning sign when it fails.
3. Get the full list. Run a Lighthouse report with Accessibility checked, or open CSS Overview and look under Colors for contrast issues.
4. Read it on your phone. Go outside and read the smallest text on the page. If any of it is hard to read, darken it.

When a color fails, the Color Picker in DevTools suggests the nearest shade that passes, and it’s often closer to the original than you’d expect.

Catching it earlier

Pale text usually looks right on the screen it was reviewed on, which is why it gets through.

What I’d suggest: before the palette is signed off, read the body copy, captions and form hints on a phone in normal light. It takes a few minutes, and it’s much easier to change at that stage than after launch.

Send it over if you’re not sure how your site holds up. I’d like to hear what you’re working on, and the team at Dthree can take a look with you.

Quick questions, quick answers

Does gray text hurt SEO?

Not directly. Search engines don’t rank pages on contrast. It does affect whether people stay and read, and Lighthouse counts it in your accessibility score.

What about AAA?

WCAG’s stricter AAA level asks for 7:1 for body text, about #595959 on white. It’s a good target for long reading such as articles and policies. For most marketing pages, 4.5:1 is the practical baseline.

Does this apply to text over photos?

Yes, and it’s harder because the background changes across the image. A dark overlay or a solid panel behind the text usually fixes it.