Web Site Design: Setting the Wrong Backgrounds and Reducing Readability



One of the most important tasks your Web site must accomplish is communicating your message to site visitors. Be sure the time, energy and funds you're spending produce design that assists in that communication.

Can Your Site Be Read Easily by All Visitors?

Readability is a fairly big topic and covers typefaces, capitalization, thickness of letters, colors and more. It is an important topic to keep in mind when designing your Web site. And it's not just about visually impaired visitors. The decisions you make regarding any of these factors can affect how readable your site is to anyone.

Don't make it difficult for visitors to read text on pages by adding dark colors or busy illustrations in the background. Patterned and even solid color backgrounds can reduce readability and obscure content on your Web site because they can reduce the contrast needed for our eyes to discern letter forms.

Stressing the Reader

Normally, when we read, we do so by recognizing words through the shapes made by letter combinations. When you reduce readability, you make readers work harder. They can't read as fast because they have to look at each letter. It can get quite frustrating to attempt to read long passages of text through busy backgrounds or low contrast. Just try reading dark green type on a red background or yellow type on a light blue background. Or any words set against a background image that has words in it.

When backgrounds and the type on them are in colors that are close in value, not only does the contrast go away, but you can inadvertently introduce a visual effect that makes the type look like it's vibrating.

Give Your Site Visitors a Break

Years ago, I participated in a university study of computer screen readability and the results were clear:

  • Black type on a white background was the easiest to read.
  • Dark type on a light background was more readable than light type on dark backgrounds.
  • Sufficient contrast between type and background was required for readability.
  • Background images reduced readability. The more complex and darker the background, the more difficult it became to read the text in the foreground.

So, take a look at your site. Do you have backgrounds set to colors that reduce readability? Do you have images placed behind important text? Do you have type set in colors that don't show up well?

If you answered yes to any of those questions, what can you change that might improve the readability and, therefore, usability of your Web site.

  • Can you lighten backgrounds or darken text, or both, to increase contrast?
  • Can you remove images from behind text?
  • If you must have a patterned background, can you make it very light like a watermark and arrange it so that large unpatterned sections are behind the blocks of text?

If something is hard to use it doesn't get used very much.

Comments: [0] / Post comment:
20 Nov 2008 21:51:29

Smoke visible this afternoon from Tea Fire site - KSBY

BBC News Smoke visible this afternoon from Tea Fire site KSBY, CA - Santa Barbara County fire ivnestigators will be performing smoke tests at 2 pm Thursday afternoon near the place where the Tea Fire started on East Mountain ... Video: Fire Victims Go Back to Salvage Memories Governor Wants S. Calif. Declared Disaster Site LOS ANGELES: Fire recovery funds established; photos posted of ... -
20 Nov 2008 20:53:59

Lawrence Public Schools Launches New Web Site - MarketWatch

Lawrence Public Schools Launches New Web Site MarketWatch - As a resource for parents, students, teachers and the community, the site provides information and facilitates communication to help create a college-going ...
20 Nov 2008 20:35:49

Another supposed mammoth bone found at site south of Kennewick - Seattle Times

Another supposed mammoth bone found at site south of Kennewick Seattle Times, United States - Kennewick Another large bone thought to be from a mammoth that wandered Washington thousands of years ago has been found on a 27-acre site southwest of ...

Keywords: