Hate that Gray? Wash it Away!

Grey text can be difficult to read, as this excerpt from a window website demonstrates.
The use of gray type fonts is in vogue among many graphic designers. This, despite extensive research that demonstrates that contrast between characters and background is a key to readability. The challenges of using gray on paper is compounded when using gray text on a computer monitor, where background contrast is already diminished. To make matters worse, many designers use a medium gray font on a light gray background, further reducing contrast. Here is a simple demonstration:

The use of gray type fonts is in vogue among many graphic designers. This, despite extensive research that demonstrates that contrast between characters and background is a key to readability. The challenges of using gray on paper is compounded when using gray text on a computer monitor, where background contrast is already diminished. To make matters worse, many designers use a medium gray font on a light gray background, further reducing contrast. Here is a simple demonstration:

The use of gray type fonts is in vogue among many graphic designers. This, despite extensive research that demonstrates that contrast between characters and background is a key to readability. The challenges of using gray on paper is compounded when using gray text on a computer monitor, where background contrast is already diminished. To make matters worse, many designers use a medium gray font on a light gray background, further reducing contrast. Here is a simple demonstration:  

The use of gray type fonts is in vogue among many graphic designers. This, despite extensive research that demonstrates that contrast between characters and background is a key to readability. The challenges of using gray on paper is compounded when using gray text on a computer monitor, where background contrast is already diminished. To make matters worse, many designers use a medium gray font on a light gray background, further reducing contrast. Here is a simple demonstration:

The use of gray type fonts is in vogue among many graphic designers. This, despite extensive research that demonstrates that contrast between characters and background is a key to readability. The challenges of using gray on paper is compounded when using gray text on a computer monitor, where background contrast is already diminished. To make matters worse, many designers use a medium gray font on a light gray background, further reducing contrast. Here is a simple demonstration:


Least you think I am overstating the trend, take a look at the excerpt above from a stylish but hard to read website.

Remember, please, that many senior designers, myself included, no longer have such keen eyesight.

---------------
UPDATE:  White text against a light background is also difficult to read.  For example, the following from www.MasterFormat.org:

---------------
FURTHER UPDATE: I just had cataract surgery and can now see most of the gray fonts used on websites. But still, I argue for use of higher contrast typography. In contemporary architecture, we are compelled to create buildings that are accessible by those with disabilities. The same standard should apply to access to information.

7 comments:

83bj60 March 2, 2011 3:10 PM  

Right On! Our population is aging and there is nothing more frustrating to me than having to read gray fonts on less than white backgrounds, so I totally concur with you.

One solution is to use user style sheets to allow the user to replace all font colors with pure black (rgb(0,0,0,)), and although it's fairly easy to implement, it does requires some programming knowledge for users and I have not found a way to replace just *certain* colors fonts, let's say, just the grays, with black, say, anything between rgb(16,16,16) and rgb(128,128,128) to rgb(0,0,0).

Req,  July 29, 2011 2:36 AM  

How about not force justifying your own text when complaining about web text readability?

Michael Chusid, RA FCSI July 30, 2011 8:44 PM  

I thank Reg for his valid suggestion for improving this website.

runbei August 14, 2011 9:25 PM  

I say hurrah for "force justifying." Justified text has been shown to result in significantly better comprehension. (Colin Wheildon)

Michael Chusid, RA FCSI August 15, 2011 6:22 PM  

Colin Wheildon researched the relationship of text layout to legibility and found that fully justified text was twice as readable as "ragged right" layout. Others disagree. There are many variables in a graphic design project, and the choice of justification will be effected by audience, message, line length, and other factors. More, Wheildon's research was conducted in the mid 20th Century. I have not seen conclusive evidence for the legibility of text on the internet.

cybervigilante December 23, 2011 8:13 AM  

This is just hateful - why are they doing this insanity? I just left a comment on MSN which has this Really light gray - totally unreadable.

It's a stylish vogue that makes no sense at all. I've always striven for readability and idiot-proofing. This reminds me of the very early days of the web when people were doing pink text on purple cloud backgrounds and stuff like that - because they could. As a saying that eventually stopped that foolishness remarked - just because you can doesn't mean you should.

Put the following in a bookmark as the Address (use Properties - our put it in the browser address bar and bookmark that. Then put it in your bookmark bar to make it easily accessible. Clicking the bookmark will turn things black on white:

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

Michael Chusid, RA FCSI December 28, 2011 8:20 AM  

CAUTION -- I could not figure out how to use the code above. Use at your own risk.

Post a Comment

About Chusid Associates

Chusid Associates is North America's leading building product marketing and architectural technology consultant. If you have questions or would like to schedule your free introductory consultation, please contact us for more information.

Chusid Associates is Hiring

Click here for more information.

  © Blogger template Simple n' Sweet by Ourblogtemplates.com 2009

Back to TOP