First appeared on January 16, 2003
Last update on Tuesday, March 25, 2003
Learn why gray text, the most recent web design annoyance is popping up everywhere; also learn what you can do to make your text look better other than making it darker.
Sponsor
Recently another web design annoyance has emerged in the form of low-contrast text. Yes, you probably came across it already: I am talking about the gray text phenomenon. It seems that more and more web sites, and not just small personal web sites, are switching from black to gray text. It sounds crazy, doesn't it? Why would you willingly make your text less readable? After all, black on white is the maximum contrast you can get. Unfortunately, things are more often than not, not that simple. In this article I will show you why black on white is not necessarily the ideal choice as the main text color on computer screens, and why gray text is still evil.
First a picture is worth a thousand words, and let me show you two screenshots from two company web sites. The first one is from real.com, the makers of RealOne Player, and the second is from i2, a supply chain management company that had an annual revenue of almost a billion dollars in 2001. Click on the pictures to switch between the original gray text version and black text version which was made by yours truly. Which version is more readable?
Click on image below to switch between the original gray text version and black text version:
Click on image below to switch between the original gray text version and black text version:
Of course the black text version is more readable. Then why do those web sites use gray text? Have their designers never heard of contrast? Surely, they know what contrast is. After all, it doesn't take any special skills to realize that the ubiquitous contrast buttons on computer screens make text sharper, easier to read when turned in the right direction, which is more. It is our perception system that decides what looks sharp and what looks pale, and unlike higher-level cognitive processes such as decision making, perception doesn't change from person to person. So, it is not really personal preference. Then what is the reason?
The reason is... gray text looks better and more coherent when seen from a distance or as an element of the overall design, but, and this is a big but, it is not meant to be read in these cases. To see what I mean, take a look at the following half-size versions of the above screenshots:
Unfortunately, some visual designers sacrifice readability for a slight increase in visual appeal because they do not really read the text on screen; they treat it as a large block of horizontal lines, and the darker those lines are the uglier they look. So, decreasing the contrast a little makes the overall design look nicer but less readable. Poor readability is not the designer's problem. After all, he will probably never try to use the site he designed. Come on it is a boring supply chain management company web site!
So, how can we find a common ground between visual designers and users? By simply leaving the text black and making the background gray! And that's exactly what we are doing on Wow Web Designs. Try to read this paragraph on a white background, and decide yourself whether our bluish-gray background or white is easier on your eyes.
So, how can we find a common ground between visual designers and users? By leaving the text black and making the background gray! And that's exactly what we are doing on Wow Web Designs. Try to read this paragraph on a white background, and decide yourself whether our bluish-gray background or white is easier on your eyes.
See... very light background colors actually make text easier to read because your computer screen is not paper; computer screens emit light that may be hard on your eyes especially when they are bright; they work that way, and a natural consequence is that you can read a computer screen even in total dark, but you cannot read a paper in the same condition. Therefore we selectively reduce the brightness of just the background. The default background color in early web browsers was gray for a reason as you see. But since print-publications are black-on-white, it was thought that web pages should be like that too. Try returning to basics on your web sites; I don't mean use ugly grays for backgrounds but use light pastel tones that make text easier to read. Most importantly, never ever sacrifice readability for visual appeal.
Update:There is a follow-up article: Gray Text Revisited that offers an alternative explanation.
By leaving the text black and making the background gray! And that's exactly what we are doing on Wow Web Designs.
The only problem with this statement is that I was reading it in purple text on a gray background. Why? Because I have changed all of my browser defaults and you have assumed everyone uses black text, rather than defining the color in your CSS.
I believe that if you are going to redefine the color of one element on the page, you should define everything. If you don't, you open yourself up to odd-looking, if not downright illegible, pages.
Good job pointing out that gray text decreases legibility. Even more annoying to me is inverted text (white on black background), which makes your eyes sear with pain.
Poor job pointing out that your site is black on gray. While it DOES make the overall contrast easier on the eyes, it is still less discernable than black on white.
It is a proven fact that black text on a white background increases readership of content by as much as 20% !!! There are many reasons for this... both physical and psychological, but that's the way it is.
Good to see a discussion on this. I have definately seen a trend on the use of grey text, have even come accross several design portfolio sites where a grey background is coupled with a lighter toned grey text. Looks cool and designy, but a challenge to read.
I think in the examples you have shown, any designer who would put grey text on a white background in an informational based site isn't really thinking about the user's experience. I would suggest Roger Black's book, "Building Web Sites that Work" (a late 90's book, a little dated but good), in it he discusses various contrast issues and color usage.
I really like the message here. I have been using Gray text on most of the last 50 or so sites I have designed and have not considered the alternative discussed in this article. The only challenge becomes integrating images into the colored background. You would need to always make sure your Photoshop background layer is the correct color when generating support images. The challenge comes into play when that subtle background color changes -- it may require graphics redesign efforts on all support related images. - Mike
First of all, because the subject interested me' and because I like to give credit when due - the article was concise and enlighting, but... For a site that whats to be taken seriously about design - you shouldn't make viewers scroll horizontally!
Before writing this comment, I read other readers comments and saw you reply to another reader (r937 dd. Jan. 21st. 2003) on the same subject.
So I know you listen to your readers and respect them.
If you need to you a larger screen for legitimate reasons - just say so up front. That way we will know that your know what your doing!
This is my first visit to your site. Like what I see so far.
that's way worse than the eensy weensie difference between gray and black text
rudy
(ed. you are right that the page width exceeds 800 pixels, but the screenshots should be presented in their original size for an accurate comparison, and it is hard to find 640x480 web designs nowadays.)
Your article on contrast is really good, but more than once the author tosses in a parenthetical phrase but doesn't let the reader know what's going on. "But and this is a big but," should be "but (and this is a big but)," or, if you don't like parentheses, "but, and this is a big but,".
Sometimes, more than commas are missing. As in "Unfortunately, things are more often than not that simple." Huh? I think he's saying "Unfortunately, things are (more often than not) not that simple."
Aside from the grammatical problems, the story is right on the money. It points out one more case of a bad design resulting from a gap between the designer-purchaser on one hand, and the user on the other. Voice mail is the prime example: the designers pleased their employers but drove the people who have to use it crazy. So grey text looks good to the designers and art directors, but fries the eyeballs of the actual users.
(ed. Thank you for your input. As you pointed out, there were some rather unfortunate typos in the article. Corrected as suggested.)
Home 
Top 25 
Wow Lists 
Latest Reviews
Login
Search 
Suggest 
Print 
E-mail 
Feedback 
Rate 
For more web design annoyances see our 
