Blooper 58: Shades of Beige: Color Differences too Subtle

 <  Day Day Up  >  

Blooper 58: Shades of Beige: Color Differences too Subtle

Few people who design or develop websites have training in human factors, ergonomics, human-computer interaction, or human perception. As a result, the Web is full of sites that rely on subtle color differences to convey important information. Such sites cause problems for a large number of users, for several reasons:

  • Color blindness. A significant proportion of the general population has some sort of color blindness. Approximately 10% of men do, and although the percentage is much lower for women, it is not zero. Colorblindness is an inability to distinguish certain colors. The most common form of colorblindness is red-green, with blue-yellow a distant second.

  • Poor ability to distinguish pale colors. For all people, the paler (less saturated ) two colors are, the harder it is to tell them apart.

  • Variation between color displays. Computer monitors vary in how they display colors. Something that looks yellow on one display may look beige on another. Colors that are clearly different on one monitor may look almost the same on another.

  • Gray-scale displays. As more personal digital assistants (PDAs), mobile phones, and other appliances are used to access the Web, the number of gray-scale displays displaying websites will increase.

  • Display angle. Some computer monitors, particularly liquid crystal display (LCD) ones, work much better when viewed straight on than when viewed from an angle. When LCD monitors are viewed at an angle, colors-and color differences-often are altered .

Color as a Navigation Aid

A good example of relying on subtle color differences comes from, an online travel subsidiary of American Express. The site allows customers to make airline reservations . Making an airline reservation takes several steps. While a reservation is being made, the site shows all the steps across the top of the page and marks the current step in a different color (Figure 8.23). The problem is that the color that marks the current step is so subtle that many people, either because of their vision or because of their computer display, won't be able to see it. Can you?

click to expand
Figure 8.23: (Jan. 2002)-Current step in airline reservation process is marked using a subtle color. A- Step 1. (b) Step 2.

Perhaps the most common use of color on the Web is to distinguish unfollowed links from already-followed ones. As discussed in the previous chapter, sites in which links don't change color when followed are committing a blooper (see Chapter 7, Blooper 53: Been There, Done That? Can't Tell). If a site sets different colors for unfollowed and followed links, it technically avoids that blooper. However, if the two colors are so similar that users can't tell them apart, the site is committing the blooper of relying on color differences that are too subtle.

For example, consider a navigation bar at (Figure 8.24). Can you tell which two links have been traversed? [6] Not only are the two colors too similar, but the only thing colored is the text characters , which are very thin and so don't provide much area for showing the color. Color patches are harder to distinguish the smaller they are, but this is not widely known among Web designers and developers. The result is websites with colored lines 1-pixel thick and colored text in small nonbold fonts, making colors virtually indistinguishable.

click to expand
Figure 8.24: (Jan. 2002)-The difference in color between followed and unfollowed links is too small.

Color in Web Content

The preceding examples of relying on subtle color differences were concerned with navigation in websites. Color is also often used-and abused-to convey information in Web content.

The Federal Reserve Bank of Chicago provides a graph showing how short- term interest rates have fluctuated in recent years . It actually graphs three rates: Federal Funds rate, Discount rate, and 3-month T-bill rate (Figure 8.25). Each quantity is plotted in its own color. The problem is that some visitors to the site will have trouble distinguishing the colors, especially the red versus the blue. Compounding the problem is that the color patches shown in the color legend are so small that they won't help many people.

click to expand
Figure 8.25: (Nov. 2000)-Graph uses different colors for different plots on same axes. Some users may not be able to distinguish them.

Avoiding the Blooper

The blooper-"relying on subtle color differences"-can be avoided in two ways, each focusing on a different key term in the blooper:

  1. Don't rely solely on color. Use color redundantly with other cues. If you use color to mark something, mark it in another way as well.

  2. Avoid subtle color differences. Make the color differences gross enough that they are unmistakably different. Colors should differ in saturation and brightness as well as in hue. One way to test whether colors are different enough is to print them on a gray-scale printer. If you can't tell the colors apart when printed in grays, they aren't different enough (Brinck, Gergle, and Wood, 2001).

Following these guidelines, I strengthened the marking of the current step at (Figure 8.26). Instead of relying solely on color, I used both color and a bold outline around the step's number and name , so even a colorblind person could see what step he or she was on. I also used a very unsubtle yellow instead of beige as the marking color, to draw users' attention.

click to expand
Figure 8.26: Correction of blooper at -Current step is highlighted in two ways- color and bold border. Color used to mark current step is not subtle.

Another graph at the Federal Reserve Bank of Chicago uses gray-scale "colors" to show how the average annual income varies across the United States (Figure 8.27). This is a well-designed graph. Any sighted person could read it, even people with colorblindness, a gray-scale display, or a faulty color monitor.

click to expand
Figure 8.27: (Nov. 2000)-Graph uses different grays to convey information. Differences are visible to all sighted people, on any monitor.

[6] Forums and Product Support Downloads.

 <  Day Day Up  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: