I had noticed of late that several websites are more difficult to read, that they opted to use a lighter grey text instead of a more robust black. But it didn’t dawn on me that it wasn’t my aging eyes: this was a trend. That is, until I read an article on Backchannel called “How the Web Became Unreadable.”
It’s a good read for anyone interested in typography, design and layout – and not just the Web, but print as well. It makes several good points about contrast including providing some important technical details about how contrast is measured.
I’ve written in the past about how contrast is important in design (here, and here for example). But apparently there’s a design trend of late away from contrast towards murkiness. In his article, author Kevin Marks notes:
There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.
Others have noticed this too, even before Marks. In 2015, Katie Sherman wrote on Neilsen Norman Group’s site:
A low-contrast design aesthetic is haunting the web, taking legibility and discoverability with it. It’s straining our eyes, making us all feel older, and a little less capable. Lured by the trend of minimalism, sites are abandoning their high-contrast traditions and switching to the Dark Side (or should I say, the Medium-Gray Side). For sites willing to sacrifice readability for design prowess, low-contrast text has become a predictable choice, with predictable, persistent usability flaws.
This trend surprises and distresses me because it seems a singularly user-hostile trend; anti-ergonomic against the whole point of the internet. Apparently it’s part of a minimalist design trend. Now I don’t mind clean, uncluttered web pages, but I balk at making them unreadable. Pale grey reduces accessibility and legibility.
Others are more active in their concern and have even launched a counter-revolution. On the site Contrast Rebellion, it notes:
…a website’s content is primarily there to be read.Don’t give your visitors a headache only because gray or any other low-contrast font color looked better on the design comps than black.
Contrast is not limited to black and white. Contrast can be any colours that are sufficiently differentiated. But of course that requires a bit more thought to pairing than simple black and white. Some colours (e.g. red and green) may interact in unpleasant or unexpected ways.
Rather ironically, a good article on Viget.com explains how colour contrast works and how to assess best practices, while using lower-contrast grey for the body text. Similarly, an article on Web Design Ledger about contrast has the same failing. Dowitcher Designs is only slightly better in its article, “Is Your Low-Contrast Design Costing You Clients?”, but the content is worth reading nonetheless. It concludes:
Web design trends will change through the years, but readability and accessibility are always “in.” Every time you upgrade to a new look, make sure you haven’t lost your functionality, too, and you’ll be well on your way to retaining clients and boosting conversions.
I think some of these sites suffer from using a lightweight (thin), usually sans-serif type which, while elegant, lacks the density of stroke to provide sufficient contrast even when the CSS colour code is set properly. Even the text on the Backchannel page, which uses a slightly more robust serif typeface, is, to my eyes, still too grey.
As Kevin Marks wrote:
Text that was once crisp and dark was suddenly lightened to a pallid gray. Though age has indeed taken its toll on my eyesight, it turns out that I was suffering from a design trend.
My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print?—?keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.
A sentiment with which I heartily agree.