Human eyes have limitations. There’s a theme trend to use light-gray type on web pages. This is not good UX. But designers, who should know better, are setting bad examples. Black on white was the standard for many years. That color combination is fatiguing when reading large block of text onscreen.
The recommendation is #333 dark-gray on white to reduce harsh contrast. But going lower contrast than #333 makes viewers squint to attempt reading text – even when the font size is 18px. We recommend using browser tools for checking font specifications including color and size.
Screengrab example of low contrast text:
Below are webtype specification for the sample low-contrast web screen above.
Body text <p> specifications.
color: #656E7F (medium gray 50% gs)
font-family (stack): “Source Sans Pro”, Helvetica, Arial, sans-serif
line-height: 1.5em (27px)
Headline <h1> specifications.
color: #F45145 (pink 40% gs)
font-family (stack): “PT Serif”, Georgia, Times, serif
line-height: 1.15em (54px)
“An article about how the web is becoming unreadable has been making the rounds. I feel like most designers already know that light gray text on a white background is a bad idea. The article focuses on text color but I think a more relevant issue is font weight – I’m seeing so many sites these days set body text in 100 and 200 weights which were not designed for body text use.” — Jeremiah Shoaf of TypeWolf
How the Web Became Unreadable
I thought my eyesight was beginning to go. It turns out, I’m suffering from design. by Kevin Marks
Look at these websites. They look fabulous indeed but how good is that if people can’t read them?
Light-gray text is fake minimalism.
“Minimalism in web design started as a backlash against decades of interfaces that increased the prominence of so many elements at once that they all clamored for attention and became visually overwhelming.
What’s great about minimalism is the principle of stripping out non-essential elements. In most cases, this is a best practice to follow.
When it becomes an issue is when there is lots of essential content on a page. Having a lot of content doesn’t suit the minimalist approach to design. So the designer’s compromise has become reducing the contrast of those elements so that, at a glance, the page still ‘looks’ minimal.
Yes, low contrast text does ‘look’ minimal, the same way a blurred photo on Instagram can ‘look’ retro. But you wouldn’t blur your website even if it were fashionable. Don’t lower your contrast, either.” — Nielsen Norman Group
6pt, 8px, 0.5em, 50% Sample text
7pt, 9px, 0.55em, 55% Sample text
7.5pt, 10px, 0.625em, 62.5%, x-small Sample text
8pt, 11px, 0.7em, 70% Sample text
9pt, 12px, 0.75em, 75% Sample text
10pt, 13px, 0.8em, 80%, small Sample text
10.5pt, 14px, 0.875em, 87.5% Sample text
11pt, 15px, 0.95em, 95% Sample text
12pt, 16px, 1em, 100%, medium Sample text
13pt, 17px, 1.05em, 105%, Sample text
13.5pt, 18px, 1.125em, 112.5%, large Sample text
14pt, 19px, 1.2em, 120% Sample text
14.5 pt, 20px, 1.25em, 125% Sample text
15pt, 21px, 1.3em, 130% Sample text
16pt, 22px, 1.4em, 140% Sample text
17pt, 23px, 1.45em, 145% Sample text
18pt, 24px, 1.5em, 150%, x-large Sample text
20pt, 26px, 1.6em, 160% Sample text
22pt, 29px, 1.8em, 180% Sample text
24pt, 32px, 2em, 200%, xx-large Sample text
26pt, 35px, 2.2em, 220% Sample text
27pt, 36px, 2.25em, 225% Sample text
28pt, 37px, 2.3em, 230% Sample text
29pt, 38px, 2.35em, 235% Sample text
30pt, 40px, 2.45em, 245% Sample text
32pt, 42px, 2.55em, 255% Sample text
34pt, 45px, 2.75em, 275% Sample text
36pt, 48px, 3em, 300% Sample text
Easy reading helps learning and enjoyment, so what we write should be easy to understand. Readability is about ease of reader understanding. Text should be inviting. Text depends on content (vocabulary) and typography (font size, line height, and line length).
Various factors to measure readability have been used, such as speed of perception, perceptibility at a distance, perceptibility in peripheral vision, visibility, the reflex blink technique, rate of work (e.g., speed of reading), eye movements, and fatigue in reading.
Readability and legibility aren’t the same. Legibility is a measure of how easily individual letters or characters can be distinguished from each other.
The average adult reads at the 9th-grade level. It also shows that, for recreation, people read texts that are two grades below their actual reading level.
Four variables give the most reliable measure of web reading ease:
- Words per sentence.
- Average grade level of words.
- Characters per word.
- Sentences per paragraph.
Readability should be your number one goal. Someone in your company or organization should especially check graphics to ensure they’re readable. This means:
- No “reverse” (white body text on a colored background, which is hard to read).
- As few italics as possible (they’re hard to read).
- Not too much boldface (ditto).
- Not too much super-wide full-width copy (ditto).
- No type above headlines (confusing).
- No hard-to-read colors like light grays. There should be a 30% grayscale differential between text color and background color. We search for edges of letters for character recognition.
Readability Plugins for WordPress
An interesting article about web readability mentions several WordPress plugins that help assess readability of body text. The one plugin we feel is most appropriate (because it’s lightweight) is: FD Word Statistics Plugin. It shows word and sentence counts at the bottom of the WordPress editor. Plus a readability analysis of the page or post currently being edited is shown using three different readability measurements. Those are the Gunning-Fog and the Flesch-Kincaid indexes. (Plus one labelled Flesch that we don’t care about).
For example for this post, the statistics appear at the bottom of the Dashboard Editor page as follows: