Color Contrast in Web Typography

Posted by: Josh Walsh in Design.

Last year I wrote a list of 50 tips for a more user friendly website.  One of these tips has caused controversy off of the blog, as well as prompted a number of emails asking for clarification.

#23 – Use dark gray text instead of black text on a white background;

My intention here was to point out that a subtle lightening of your black text on a white background actually helps improve legibility.    True black text on a true white background is too high of a contrast for everyday reading.  Subtlety is key.

An added bonus to this method is that it gives you the ability to use contrast to your advantage.  For example, you could bold a phrase in the middle of the paragraph and bring it’s color up to true black for an added “pop.”

This also makes the text appear more natural.  In our everyday reading off of the computer we rarely see true black on white text anywhere.

Newspapers use a dark grey text on a light grey background.  Most printed books are printed with a dark grey on white as well.