Color and Usability

It sounds like a major dose of obvious if I say you want to help your visitors see your Web site, doesn’t it.

“Doh,” at least 8 percent of my male and .5 percent of my female audience say before they roll their eyes at me. “Tell us something we don’t know, you pip-squeak gray Martian.”

“Uh, actually, I’m green.”

“Whatever.”

Do you see what I’m getting at? If the ability to distinguish color is a critical element of your site’s persuasion architecture, then your site isn’t as user-friendly as it could be. And it won’t be persuading some folks as effectively as it could.

At least 10 percent of your audience has some form of vision impairment that makes it difficult for them to see your Web site as you intend it to be seen. There’s partial color blindness in which the perception of some colors is affected (the most common is red-green). There’s total color blindness (pretty rare). And then there are the folks who are partially sighted and blind.

Those with mild impairments simply live with the limitations. Those with more serious impairments have a range of assistive technologies available that allow them to change how your Web page appears in their browsers – “The better to see you with, my dear.”

Basically, we’re talking LCD again (Lowest Common Denominator). The cool thing about LCD Design, when you do it right, is that no body loses!

Marta Eleniak, a UK-based usability consultant, offers up a series of color checklists “that will help you design sites that are suitable for the widest range of users possible.”1 Here’s a sampling of her ideas that will improve the usability of your site:

  • You need strong contrast between any background color and the over-lying text color.
  • Keep the backgrounds behind your text solid and plain – no patterned stuff.
  • Make sure that color is not the only way you communicate information the visitor must understand to move forward in your process – indicating a field that needs to be corrected on a form through color alone is not a good idea.
  • Employ color-coding very carefully – no more than five different colors and keep them consistent across the site.
  • The best combination for readability is black text on a white background.
  • If folks will be looking at the page for a long time, or if your specific audience is elderly, use brighter colors.
  • So that visitors can easily distinguish your colors, “choose darker shades of blue, red and purple, and paler shades of green, yellow and orange.”
  • When the difference between adjacent colors is necessary for meaning, don’t put red alongside green or blue alongside yellow.
  • Don’t use grey for text or grayscale for diagrams that convey critical information.
  • Because blue-receptors in the eye are least numerous, avoid blue for small text and diagrams with thin lines.
  • Some color pairings can create headaches, perceived vibrations, phantom shadows and other optical illusion type situations for your visitors. Avoid pairing color chart opposites (e.g. blue and red) and high chroma colors (e.g. blue and yellow).
    •

    One of the more important acceptance tests you can run is to evaluate each of your pages first in grayscale and then in black and white (the most extreme form of contrast in which your site can be rendered by an assistive technology). You want to make sure the persuasion architecture of your site holds under these manipulations.

    Just remember. Color should enhance your site’s experience, but because so many people perceive color in so many different ways, color cannot define your site’s experience. Bear in mind the words of the influential teacher-artist, Josef Albers:

    “If one says “Red” (the name of a color), and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very different.”2

    Oh, and by the way. Please feel free to say I’m any color you want. But I’ll have you know, I’m considered tall for a Martian, so don’t go calling me a pip-squeak!

    1 “Essential Colour Checklists for Web Design.” Marta Eleniak. Sitepoint. April 28, 2003. http://www.sitepoint.com/article/1126.
    2 Interaction of Color. Josef Albers. New Haven: Yale University Press. 1975. p. 3.

    ow do you prefer to be addressed:

    Your email address



    We Value Your Privacy!


    Forward This Grok To A Friend!

      Your Privacy is Guaranteed

    © 1999-2002 Future Now - Publishers of GrokDotCom. Your Privacy is Guaranteed. We will never give, lease or sell your personal information. Period!