Please Stop Using Grey Text

Andrew Somers on 2022-04-01

For over 1000 years black text on white paper has been the best practice for printed texts worldwide. Since the advent of the web and WCAG 2 contrast specs, we’ve seen websites shift toward a very unreadable light grey text over the last 15 years. It’s time to put an end to this practice.

An examination of design for readability

And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.

Further, Medium prevents their users from selecting black text as a choice. While Medium’s “Fischer-Price-simple” content creation is easy to use, it is also extremely limited, and fails in accessibility in areas beyond color. Perhaps this article can serve as a wake up call regarding this issue.

On this TangledWeb publication, we have have tried a number of combinations, including dark mode, and other variations on light mode, but Medium does not permit authors to adjust the colors of text. The irony is not lost on this author.

…this 600 year old relic is more readable than many modern websites…

Gutenberg Bible, Lenox Copy, notice the black text on white paper. New York Public Library, 2009 (Creative Commons)

The War On Reading

The printing press has existed for over a thousand years in China. Nearly 600 years ago in Europe, Gutenberg printed his famous bible using a press with movable type. While the old gothic glyphs are certainly difficult for our modern eye to read, notice in the image above the columns of black text, the columns have a limited width, for easy reading, and the font is a large equivelent of 21 points, or about 28px. (Based on 147mm per 20 lines).

The antique font family aside, this 600 year old relic is more readable than many modern websites. And that is a systemic problem that needs to change.

Intentions Lead the Way…

Fast forward to this beginning of this century: in 2000, the web was still a novelty. Site design was relatively primitive, and text was usually black on a light background, usually not white #fff, but a light grey such as #e8e8e8. All was not readable though, the introduction of textured backgrounds interfered with text. And other misguided features such as the ever so annoying “blink” interfered with website accessibility.

Interested in an internet that was accessible to all, the World Wide Web Consortium launched the Web Accessibility Initiative (WAI). This group created WCAG 2.0 (Web Content Accessibility Guidelines) circa 2008.

WCAG 2.0 attempted to be a comprehensive set of guidelines for content presented on the web. And while the standard contains a lot of important advances in accessibility for content, one of the most important—that of color contrast for text—is substantially inaccurate, as it does not follow human perception, and moreover, did not consider the consensus of vision science and readability science available at the time.

Certainly the intentions were well meaning, but there was a clear lack of due diligence, and the underlying misunderstandings of the needs of sighted users for readability have expanded today, to the point that the web has become increasingly unreadable for all.

Genesis of the Readability Decline

We discuss the background and implications of WCAG 2 contrast specifications in “A Contrast of Errors.” And further demonstrate in “What’s Red & Black & Also Not Read?” how WCAG 2.x specifications are less than helpful for the very people it is claimed to be helpful for.

Three years ago, April 2019, this author came across the WCAG 2 contrast maths and the related specifications, and recognized that there were a number of issues. This led to involvement with the W3 as an invited expert, and an extended research project to define the problems and find solutions.

Among the problems with WCAG 2 contrast:

This research, unearthing the problems with WCAG 2.0, and the resultant solutions, were not always met well by some in the accessibility community:

Top tweet, a comment by a member of the accessibility community. The lower quoted tweet is a quote from the author’s GitHub thread #695, which details the failings of WCAG 2 contrast. Fair Use.

In answer to this tweet, WCAG 2 low contrast criterion has been a net loss, as designers have used this wrong math as an excuse to lower contrast to unreadable levels. Remember that websites before WCAG 2 were by and large using black text on a light background, and using robust web-fonts such as Verdana.

A quick audit of some major sites at the Internet Archive’s Wayback Machine tells the story: in 2005, prior to WCAG 2, major websites such as CNN, Yahoo, About, and Wired used black text. Not long after WCAG 2 was adopted, those same sites were reducing contrast, moving to ever lighter grey texts.

Today, designers are using light weight fonts from Google fonts, and combining them with light grey CSS colors. And this site (hosted on Medium) is an unfortunate example, as Medium’s designers are using text colors that are also too light (in light mode).

Arguments that the WCAG 2 contrast criterions are “better than nothing” or “needed for color vision” are unpersuasive. Understanding human vision perception of color was well understood, but not well considered in the guidelines.

While the WCAG 2 guideline does correctly state that luminance contrast (lightness/darkness) is important for readability, the actual math and method for determining human perception of luminance contrast on self-illuminated monitors is wrong, and does not even come close to modeling or predicting how we see contrast, especially for readability.

Here’s the call to action: please stop using grey text….

(Ironically, Medium, where this site is hosted, is among the offenders here, while this author would prefer to set the text as black, the Medium interface does not permit that.)

More than 4.5 Problems

In WCAG SC 1.4.3, it states that text must be “4.5:1” as assessed by the WCAG_2 contrast math. This is insufficient for columns of body text. But as it is the standard, designers use it as a target for text, and combined with a thin small font, the experience is decidedly unreadable.

Conversely, as the WCAG 2 math does not consider human perception, that 4.5:1 can be more than enough in some cases. The fact is, relative to a perceptually accurate model, WCAG 2 manages to pass colors that should fail, and yet fail some colors that should reasonably pass.

All of this has led to misunderstandings, not to mention a general disregard for the standard as being “unusable” by designers. It’s no wonder that in a recent test it appears that over 86% of websites don’t even bother to use these weak standards.

Bring Back Black Text

Here's the call to action: please stop using grey text. An unusual misconception has arisen on the internet wherein people believe that they need to limit the darkness of the text when it's on a light background. While this may be true for very large, very bold fonts, by which we mean 36px and larger, it absolutely does not apply to body text.

On a light or white background, body text should be black. In many cases it is more appropriate to reduce contrast by darkening the background. As an example a white #FFF background is really too bright for comfortable reading, a background such as #e8e2dd provides a less fatiguing background.

The Power of the Dark Mode

Dark mode, meaning a dark background with light text, is increasingly popular. Many visual impairment types find it a less fatiguing. In fact some recent studies indicate that dark mode can reduce the incidence of myopia among readers.

But before you design a site around dark mode, know that WCAG 2 contrast math is not capable of providing useful contrast values for dark mode. Here’s a comparison with WCAG 2 versus a new perceptually accurate method being developed:

As this graphic makes clear, designers should never rely on WCAG 2 contrast for setting their colors. If there is a need to conform to WCAG 2, it is still important to use your eyes and design sense, and always increase contrast to make it visually readable, regardless of what the WCAG 2 contrast math suggests.

Join the Readability Revolution

Ideally make your text no less than 16 px, and 18 px or larger is preferred. And for text of this size go for the maximum amount of contrast that can fit into the design.

For larger text, contrast can be reduced as large and bold text is perceived as higher contrast, and therefore can use a lower contrast pair of colors. But don’t take this idea too far! If in question, err on the side of more contrast.

Thank you for reading,

Andy

Andrew Somers W3 AGWG Invited Expert Readability and Color Science Researcher

THE REVOLUTION WILL BE READABLE