• Conspicuity with Color

Conspicuity describes how well an object can be detected, or how it captures a user’s attention amongst other noise or other competing information. While this involves legibility, and readability, it also implies other display characteristics.

Color can be used to classify, label, and emphasize information displayed on a screen. When using color for these things, you need to understand that there are limits on the ability of people to process information. Understanding of how these cognitive and physiological limits effect our signal detection is very helpful in making choices for interactive design.

Opponent Processing Theory

In 1892, A German psychologist Ewald Hering theorized that there are six elementary colors that are arranged perceptually as opponent pairs along three axes. These pairs are: black-white, red-green, and yellow-blue. Each color is either a positive (excitatory) or negative (inhibitor). These opponent colors are never perceived at the same time because the visual system cannot be simultaneously excited and inhibited.

Our modern color theory stems off of this. Today, we know that the input from the cones is processed intro three distinct channels:

• The luminance channel (black-white) is based on input from all of the cones. It combines the outputs of long and middle wavelength sensitive cones.
• The red-green channel is based on the difference of long and middle-wavelength cone signals.
• The yellow-blue channel is based on the difference between the short-wavelength cones and the sum of the other two (Ware, 2000).

Color for Labeling

Or more technically, color for nominal information coding, is used to because color can be an effective way to make objects easy to remember, as well as to visually classify.

Perceptual factors to be considered in choosing a set of color labels:

• Unique hues -- Based on the Opponent Theory, they are: Red, Green, Yellow, Blue, Black, and White.

• Contrast with background -- Our eyes are edge detectors. When we have objects that must be in front of a variety of backgrounds, it may be beneficial to have a thin white or black border around the color-coded object. Consider the reasons why alert street signs, have the border, too.

• Color blindness -- Color vision deficiency (commonly referred to as "color blindness") is a condition in which certain colors cannot be distinguished or can only be distinguished with difficulty. There are several types. Some types also reduce the brightness of the color, not just the saturation. Almost all colorblindness is in males. The most common are:

  • Deuteranomaly (partial red-green, 5% of males) - Also known as "green weak," difficulty distinguishing between colors in the green-yellow-red section of the spectrum. This is the typical "red/green" colorblindness. The 7% figure quoted in some sources mixes this with some other types which also manifest in these hue ranges, though the results are fairly different.
  • Protanomaly (partial red-green, 1% of males) - Also known as "red-weak," manifests as complete or partial inability distinguish between colors in the green-yellow-red section of the spectrum.
  • Deuteranopia (complete red-green, 1% of males) - Cannot differentiate at all between red, orange, yellow, and green colors.
  • Protanopia (complete red-green, 1% of males) - Cannot perceive the hue of red, orange, and yellow, with additional dimming. This can be so pronounced that a red traffic light, for example, may not appear to be illuminated at all.

• Number -- We are limited in the number of color-codes we can rapidly perceive. Studies recommend use between five and ten codes.

• Field Size -- Object size affects how you should color code. Small color-coded objects less than half a degree of visual angle and in the yellow-blue direction range should not be used to avoid the small-field colorblindness.

• Conventions -- Color conventions are culturally defined and accepted. When using color-naming conventions, be cautious of cultural differences. Some common conventions are:

  • Red = hot and danger.
  • Blue = cold.
  • Green = life, environement, go.

Traditionally in China, red equals "life," and "good fortune," while green means "death." This is a commonly repeated example in design of the gulf of cultural differences. However, traffic signals in China are the same as everywhere else, so controls using red as stop will still work. Whatever the culprit, cultural differences of this sort are slowly eroding.

Color Conspicuity Guidelines For Mobile Devices

• Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (or the opposite).
• For text contrast, the International Standards Organization (ISO 9241, part 3) recommends a minimum of 3:1 luminance ratio of text and background. A ratio of 10:1 is preferred (Ware, 2000).
• When displaying text, purely chromatic differences between the type and the background are not suitable for displaying any kind of fine detail. A considerable luminance contrast is required, in addition to color difference.
• When large areas of color-coding are needed, such as with map regions, use colors with low saturation.
• Small objects that are color-coded should use high-saturation.
• These last two may be mixed, to allow differentiation at borders, by fading from high to low saturation or reinforcing edges with wide lines in the same hue range. Well-designed print maps have used such design tools for centuries.
• The majority of those with color deficits cannot distinguish colors that differ in the red-green direction, though numerous other types of color deficits exist.
• Recommended colors for color-coding: 1. Red, 2. Green, 3. Yellow, 4. Blue, 5. Black, 6. White, 7. Pink, 8. Cyan, 9. Gray, 10. Orange, 11. Brown, 12. Purple (Ware, 2000).

Next: Hearing & Limits

Discuss & Add

Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.

This is Not In the Book

It's some stuff that used to be in the Widget intro, but got removed for several reasons, but mostly clutter. It has not been re-written or particularly edited, so has some organizational issues. Also, it steps on the toes of the Color Deficit section. Maybe we'll clean it up sometime.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.