Wednesday, February 15, 2017

I can't read your website

An article at Backchannel discusses an interesting trend in website design, and how the web became unreadable. It's a good read, but I'll summarize briefly:

Web pages are becoming too hard to read.

Put another way, a popular trend in web design is to use low-contrast text. Maybe that looks really cool, but it is also really hard to read. From the article: "I thought my eyesight was beginning to go. It turns out, I’m suffering from design."

I've noticed this trend too, and I do find it hard to read certain websites. Even this blog used to use a #333 dark grey text on white, just because I thought it looked better that way. And to be honest, others were doing it, so I did it too. But when I changed the text to black on white, I find my blog easier to read. I hope you do too.

The colors you choose for your text can affect the readability of your site. This is directly connected to usability.

Don't believe me? Here is a sample paragraph, repeated using different colors.

White on black:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
Black on white:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
White on dark gray:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
Dark grey on white:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
White on gray:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
Gray on white:
Space: the final frontier. These are the voyages of the starship Enterprise. Its continuing mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before.
Which one do you find easiest to read?

14 comments:

  1. Replies
    1. Definitely and as well as being insanely readable has the side effect of reduced battery drain on mobile devices

      Delete
    2. Well. That would only be true for OLED screens where each pixel emits light individually. On LCD-based screens, the LCD pixel actually *covers* light emitted from the screen backlight. So even if the screen is completely black, the backlight is still emitted.

      Delete
  2. Black on white, though the difference between that and dark-grey-on-white is subtle, and any of the white backgrounds are fine.

    Of the dark backgrounds, I much prefer the white on dark grey to white on black - I personally find that *very* hard on the eyes... I can read it, but it's not pleasant to do so. Using dark grey instead of black moderates the contrast enough to be acceptable.

    ReplyDelete
  3. Surprisingly enough, grey on white.
    I find it to be the easiest on the eyes.

    ReplyDelete
  4. Torn between Black or Dark Gray over White, followed by White on Dark Gray. White over Black hurts my eyes, with such a color contrast.

    ReplyDelete
  5. There actually is actual, scientific research on this now. The Norwegian University of Science and Technology - NTNU has conducted a study with 5000 participants from the Norwegian Association of Blind (which includes all degrees of vision impairments).

    The study was based around readability of various fonts, font sizes and contrast levels on paper but the conclusion is quite clear. Larger text is better.

    At 12 pt and below there is a sharp decline in readability. As many as 90 % reports text sized to 12pt be readable but already at 10 pt only 70% think it is readable and at 8pt, only 50% think the text is still readable.

    http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http%3A%2F%2Fforskning.no%2F2016%2F10%2Fslik-leser-svaksynte-bedre%2Fprodusert-og-finansiert-av%2Fntnu

    ReplyDelete
    Replies
    1. That's very interesting. I hadn't seen this research. Thanks!

      Delete
  6. The W3C actually put together a set of guidelines on text contrast as part of the Web Content Accessibility Guidelines. They specify an algorithm for computing contrast here:

    https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

    I even implemented the algorithm in XSLT so I could test the various colors that Yelp uses:

    https://git.gnome.org/browse/yelp-xsl/tree/xslt/common/color.xsl?h=wip/html5#n271

    The value can range from 1 to 21. They recommend a minimum contrast ratio of 4.5 for normal text and 3.0 for large text.

    For reference, your old #ccc text on a white background has a contrast of 1.61, which is way too low. The dark gray example in this post (#333333) has a contrast of 12.63, which is fine. And the gray example in this post (#808080) has a contrast of 3.95, which is too low for normal text but OK for large text like headers.

    ReplyDelete
    Replies
    1. That's a great reference, thanks!

      Delete
    2. I created a Bash script that lets you input two colors, and it computes the contrast and if it is good for text. This may be helpful to write a follow-up article on this. Maybe I'll post the Bash script too.

      The reference I saw on the W3C said [[1.4.3]] minimum contrast for body text is 4.5:1 and minimum contrast for large text (headings) is 3:1, but [[1.4.6]] recommended min contrast for body text is 7:1 and recommended min contrast for large text (headings) is 4.5:1

      Delete
  7. White on dark gray && Dark gray on black - white on black and black on white has too big contrast which causes pain in my eyes

    ReplyDelete
  8. I did some work recently on a commandline tool that would check HTML for common accessibility problems, including checkin color contrast.

    * The write up on it is on our company site
    * But there is documentation
    * And even a repository!

    ReplyDelete