Grey Text and a White Background: What Happened to Readability of Type

Posted on by Joop Rijk

Readability of type must be an important subject. Ever since the invention of the printed word and movable type designers and typographers have studied and worked on ways to make type as readable as it can be. Legendary type designers and typographers like Stanley Morison, Jan Tschihold and Paul Renner have spent a large part of their careers on the subject. They very early understood that the primary goal of typography and communication design is to convey information.

With the invention of the computer CRT screen and more recently flat screens and the necessity for people to spend more time on the Web, readability of type has become even more important. Special typefaces have been developed for the Web by Matthew Carter (Verdana and Georgia) and others to better cope with the low resolution of the computer screen and improve the readability of primarily body type.

More recently, usability guru Jakob Nielsen, in his book “Prioritizing Web Usability” (Chapter 7) writes “Remember, reading online is much more difficult than reading on paper. Highly contrasting text and background colors make it easier” and “Avoid using similar colors such as light gray on white background. Low contrast can cause eye strain and discomfort.”

With so much emphasis on readability for more than a century it is surprising that we are seeing a trend in web design towards gray body type on a white background. Even people that write about typography, legibility and readability are making their web site hard to read by reducing the contrast between the type and the background.

Don’t get me wrong, those are often beautiful and professional web designs, but what happened to readability and usability. I cannot be the only person who is finding it hard to read gray text on a white background.

Who else out there is having problems reading gray text on a white background? Who is not having problems and actually find it easier on your eyes? If you have used designs with gray text on a white background, did you perform any usability testing? If so, what were the results?

About Joop Rijk

Joop Rijk, president and founder of Advanced Media Productions, did his formal studies in the Netherlands, getting an undergraduate degree in prepress technologies and typography from AGS of Amsterdam. He started his career in the newspaper industry at the Dutch newspaper Algemeen Handelsblad in Amsterdam, The Netherlands and moved to Product Marketing and Business Development in the US with Atex, Apollo/HP, Bitstream and DuPont/Imagitex. For over 14 years he has led Advanced Media Productions into becoming a leader in Internet Marketing and Web Development understanding both the digital media landscape, online market trends and the needs of businesses who want to play a key role on the Internet. View all posts by Joop Rijk
This entry was posted in Web Usability and tagged , , , , , , , , , , . Bookmark the permalink.

6 Responses to Grey Text and a White Background: What Happened to Readability of Type

  1. Dave Stone says:

    Hello Joop.

    I found your blog post almost 2 years to the day after you posted it. But for at least as long as it has bothered you, the increasing use of lighter text colors against light backgrounds has me wondering, too. Wondering if designers have lost their minds.

    Design is wonderful. But not at the expense of practicality. Not when readers have to resort to squinting and other measures to read a website easily. The whole basic idea behind having a website is to share information. But if site visitors have trouble reading about what is being offered, they will undoubtedly grow frustrated and annoyed before leaving the website entirely. That’s what I do. Sometimes I’ll email the company and tell them I was going to buy something but I had such a hard time reading their site, I left.

    It’s a no-brainer. If I want people to read my message, I’m not going to make them work to do so. I’ll think about what I want to say, choose the right words to get my message across, compose them in a typeface (and size) that is, first and foremost, readable. And I will select black (or something else of equal contrast) as my text color. People will be able to easily read it. They won’t have to rent the Hubble telescope to do so.

    Contrast, designers, contrast! Stop with the light grey text on white or grey backgrounds. It stinks. Out loud. And on toast. You wanna design? Play with the millions of other pixels on the page that aren’t text.

    So there.

  2. Peggy says:

    Why are they making it harder to read, especially for older eyes? Evidently they don’t want me to read their sites! Light gray type on a white background is simply not accessible for a lot of people.

  3. runbei says:

    David Ogilvy and many, many others (Colin Wheildon, et al.) have pointed out the folly of poor contrast in type. The problem is compounded by techie users and designers who cite surveys, with their noses held high, of “user preferences” to “prove” that serif type, gray type, etc. are “better.” Hm, how come no major online newspapers use gray type. Ah, of course – they’re old-fashioned.

  4. Danny McGee says:

    When you read off-screen, you’re never actually seeing #000 text on a #fff background, because paper isn’t a light source and ink isn’t a black hole. Personally, I find black on stark white to be more straining on the eyes than a subtle dark grey on light grey, because the latter more accurately emulates what you would actually see on a piece of paper. There’s a sweet spot to be found, but it can be elusive for some designers, and many designs stray too far in either extreme.

  5. dougout says:

    Thank you Joop! Light grey text on white is much harder to read than black on white. I often use a workaround: either increase the size of text, or “select” the whole thing, which turns the background blue and the text white. Ridiculous, but functional. Maybe this and other fashions like super bright car head- and tail-lights will eventually be replaced by saner alternatives.

  6. Jim Mooney says:

    I just hate, hate, hate this recent gray on white mania. I guess it’s webically correct but it’s just damn harder to read.

    I keep hearing these absurd claims that gray is better, but I find it illegible. I think a lot of people are going with CMS defaults because they don’t know how to change them or don’t want to bother, and the default is a rather light or medium gray that really is hard to read.

    I have no idea why the herd mentality has migrated to designing sites that are hard to read. Yes, pure black on pure white might be bad, but there seem to be a Lot more complaints about gray. You could use a dark charcoal with white, or use black on an off-white bg. But geez, light or even medium gray makes a long text nearly impossible to read.

    I think a lot of people are, for some insane reason, going with a less legible design because the powers have so decreed ;’)

    Anyway, make the below javascript the Address of a bookmark by doing right click > Properties on the bookmark (in Firefox, I don’t go near IE, but there is something similar I’m sure.) Clicking on the bookmark will then change those annoying gray hordes to a near-black. If you are looking at the code after you put it in the bookmark, the spaces may be changed to %20, but just ignore those and change #222 to another color if you so desire. You can get # color codes on the web or uses common color names.

    You can change the #222 to red if you are reading a political site ;’) Script is below. Also, if you have Clipmate or shortkeys you could also just paste this in the browser address bar instead of doing a bookmark. I don’t know how anyone can get along without Clipmate.

    javascript: (function(){ var newSS, styles=’* { background: white ! important; color: #222 !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }’; if(document.createStyleSheet) { document.createStyleSheet(“javascript:’”+styles+”‘”); } else { newSS=document.createElement(‘link’); newSS.rel=’stylesheet’; newSS.href=’data:text/css,’+escape(styles); document.getElementsByTagName(“head”)[0].appendChild(newSS); } } )();

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>