How the Web Became Unreadable
Kevin Marks
3.3K217

I’m going to (hopefully gently) call this article out a little for doing something I see in many of these “the web is too damn grey” articles: talking about good WCAG-approved contrast ratios and then going on to at least imply that advice to use slightly-lighter-than-pure-black for text should be ignored because it leads to grey-on-grey disasters. But I don’t think that’s true.

While it’s hard to find a good number for the physical print contrast between “black” ink and “white” paper, what I’ve found suggests that for books it tends to be in the 10:1–15:1 range, with good hardback books being around 12:1. The WebAIM contrast checker tells us that using a text color of #333 and a background color that’s backed off a little from pure white, say #F8F8F8, provides a contrast ratio of 11.9:1—well above the 7:1 minimum for the WCAG AAA level, and actually, well, pretty book-like.

I’d submit that a lot of pages out there use “dark grey on near white” that look just fine, because in practice, that really isn’t too light. Here’s one for you, in fact: the one you’re reading right now! Medium uses #FFF as its background, but sets the type to be #000 with a 0.8 alpha— which, perhaps not coincidentally, resolves to #333. It still looks black, doesn’t it?

The real problem, I think, is grey text on light grey backgrounds. Apple, for instance, is using #666 text on the page you linked to, which won’t even hit a 6:1 contrast ratio on a pure #FFF background. Ironically, while designers keep getting blamed for this theoretical plague, I see it most on pages put together by engineers and technical groups: Apple’s main web site, I notice, has much higher contrast. (And most text-heavy sites do, as well. Check the contrast ratios for the NYT, CNN, Washington Post, and so on, and you are likely to find 12:1 and higher.)

Show your support

Clapping shows how much you appreciated Watts Martin’s story.