Najjar, L. J. (1990). Using color effectively (or peacocks can't fly) (IBM TR52.0018). Atlanta, GA: IBM Corporation.

Using Color Effectively (or Peacocks Can't Fly)

January, 1990 IBM TR52.0018 Lawrence J. Najjar IBM Corp. Software Usability Department 1500 Riveredge Parkway R16B Atlanta, GA 30358

Abstract
This report lists specific, concrete recommendations for using color on computer displays. The recommendations are to use color sparingly, redundantly, consistently with user expectations, and with contrasting background. Additionally, saturated blue should never be used for text and saturated colors should not be used generally. Finally, users should be able to tailor colors to suit their personal preferences. Each recommendation is followed by supporting rationale based on human physiology, sensation, and perception.

Preface
This report is written for computer programmers, information developers, human factors engineers, and others who design the information that goes on computer displays. It begins with a short introduction to the human visual system and then, based on this information, provides recommendations for effectively using color on computer displays.

Biography
Larry Najjar is a human factors engineer in IBM's Application Systems Division Software Usability department in Atlanta, Georgia. He earned his MS in Engineering Psychology from the Georgia Institute of Technology in 1983. After graduating, he worked for Systems Research Laboratories in Hanover, Maryland where he helped design the software and hardware user-system interface for an advanced word processing and transcription work station. In 1984, he joined IBM's Systems Integration Division in Rockville, Maryland where he worked on the hardware and software user-system interface for tower and en route air traffic controllers. In 1989, he transferred to the Application Systems Division in Atlanta where he helps improve the usability of software for health and electronic data interchange products. Larry is a member of the Human Factors Society.

Acknowledgment
The author is grateful to Edward J. Rinalducci, University of Central Florida, for reviewing this report for technical accuracy.

Introduction
As the cost of high resolution and color displays has decreased, the use of color in application software has increased. This trend will continue for one main reason: People like color. Although the use of color alone does not improve user performance (e.g., Tullis, 1981), people prefer color computer displays over monochromatic displays. So the challenge for the application software designer is not selling the user on color, but using color effectively. Effective use of color can give the user a good first impression of the software product, encourage user acceptance, cause a user to prefer the product over competitor's products, and signficantly improve user performance.

Understanding Color
The best way to use color effectively is to understand color, how people perceive it, and how computer displays show it. Let's begin by defining color. Color is the part of the visible spectrum of light with electromagnetic wavelengths between about 700 nanometers (nm) and 400 nm. You may have learned to roughly name this spectrum, from long to short wavelengths, with the acronym ROY G BIV (Red Orange Yellow Green Blue Indigo Violet). This acronym is generally accurate. For example, yellow (580 nm) has a longer wavelength than blue (470 nm). The most obvious exception to this acronym is red. Pure red, with no tinge of yellow or blue, is obtained only by mixing other wavelengths (like 400 nm and 700 nm) together (Farrell & Booth, 1975). A color can be described by using the terms "hue," "brightness" (or "lightness"), and "saturation." Hue refers to the familiar color name, like red, green, or blue, that we give to perceived light. Brightness refers to the luminance or intensity of the light. You know the difference between a bright red and a dim red. Saturation refers to the purity of amount of white light that appears to be mixed with a color. The lower the amount of white, the purer or more saturated the color is perceived to be. The reddest red is the most saturated red. A saturated color is also composed of a narrow band of wavelengths. For example, the main difference between the colors red and pink is that red is les white, and is composed of a narrower band of wavelengths. Red is more saturated than pink.

How People Perceive Color

Now let's find out how people perceive color. Light goes through the outermost part of the eye, the cornea. This is the convex, transparent object that you see when you look at someone's eye from the side. Then the light passes through the acqueous humor (a fluid), and through the opening of th iris -- the pupil. Th iris is the colored part of people's eyes. The iris is circular and opens and closes to regulate the amount of light admitted to the eye. You may have heard people refer to "dilated pupils." Dilated pupils are when the iris in each eye is completely openend and the pupils are at their largest size. Next, the light passes through the lens, which focuses the light. After the lens, light passes through the fluid in the eye ball. This fluid, called vitreous humor, helps the eye ball to keep its shape without bending the light. Finally, the light hits the retina at the back, inside of the eye. The retina consists of densely packed photoreceptors which turn light into nerve impulses. There are two types of photoreceptors -- rods and cones. Rods operate mostly in dim light. Conses operate in brighter light. The cones are concentrated at one particular location on the retina, called the fovea. This is where the lens focuses light and it is where our color vision is best. However, there are no rods in the fovea. That is why we can't see colors well at night. The farther we examine from the fovea, the more concentrated the rods become compared to the cones. Rods are more sensitive to the presence of light than cones because rods add together their signals and send them to a single optic nerve fiber. Cones give sharper vision than rods because cone signals are sent to individual optic nerve fibers on a nearly one-to-one basis. At night, our peripheral vision uses mostly rods. That is why it is easier to see a dim star by looking beside it (peripheral vision) rather than right at it (foveal vision). Light sensitive chemicals in the cones, called photopigments, are sensitive to specific wavelengths of light. There are three types of photopigment. They are called "red," "green," and "blue" because they are most sensitive to wavelengths in each of those ranges. The "red" photopigment is most sensitive to long wavelengths (565 nm), "green" is most sensitive to medium wavelengths (535 nm), and "blue" is most

sensitive to short wavelengths (440 nm). However, those names are somewhat inappropriate because the peak wavelengths at "red" (565 nm) and "green" (535 nm) respond nearly overlap (Haber & Hershenson, 1980), "red" actually responds most to wavelengths that are perceived as yellow (Murch, 1983), and each type of photopigment actually responds to nearly the entire spectrum of light (Haber & Hershenson, 1980). Regardless of the names used, we begin to perceive color by the ratios that each of these photopigments respond to light. For example, the color purple is a ratio consisting of a strong "blue" response, weaker "green" response and an even weaker "red" response (Murch, 1983). The response of each of the photopigments is funneled into specialized cells, called spectrally opponent ganglion cells. The axons of these cells form the optic nerve. The optic nerve exits from the rear of the eye and makes a stop at a specialized brain structure called the lateral geniculate nucleus. The spectrally opponent ganglion cells and the lateral geniculate nucleus improve the very simple responses of the photopigments (Haber & Hershenson, 1980). These structures combine the "red," "green," and "blue" photopigment responses to form three new "opponent" channels. One channel transmits the ration of "red" to "green." Another channel transmits the ratio of "blue" to "yellow." The third channel transmits brightness (black-white) information using the inputs from "red" and "green." The channels are called "opponent" because they include specialized cells that are excited by one wavelength of light and inhibited by a different wavelength of light. For example, in the "red-green" opponent channel, one kind of cell fires when it receives input from red light and stops firing completely when it receives input from green light. This means that, for this cell, the colors red and green are opponent. Red wins, green loses. In the "red-green" opponent channel, there are also cells that fire when they receive input from green light, and stop firing completely when they receive information from red light. In summary, the opponent colors are red-green, blue-yellow, and black-white.

How Computer Displays Show Color

Computer displays produce color by using electron guns and colored phosphors. A typical computer display has three electron guns -- red, green, and blue. If you look closely at a color computer display, you will see that the characters consist of small dots of light. The dots of light are called pixels, which is short for picture elements. These pixels consist of phosphor dots that emit light when struck by the beam from one of the electron guns. Each pixel is composed of three, tiny, differently colored, phosphor dots -- red, green, and blue. These phosphor dots act very much like human cones. The red electron gun activates the red phosphor dot, the green electron gun activates the green phosphor dot, and the blue electron gun activates the blue phosphor dot. Like human colr vision, the computer display produces color by activating each of the tiny phosphor dots to varying degrees. If a saturated red color is used on the display, then only the red phosphors in each pixel group will be activated. The same is true of green and blue colors. However, when a desaturated red, desaturated green, or desaturated blue color is displayed, then combinations of the three phosphor dots are activated to produce the color. For example, yellow is produced by activating the red and green phosphor dots in each group (Murch, 1984b). The phosphor dots are so small that we perceive only one dot of light for each pixel. The color that we see is the addition of the wavelengths that are emitted by the three, tiny phosphor dots (Farrell & Booth, 1975).

Recommendations
You've learned about color, how we perceive color, and how computer displays show color. Based on that knowledge, here are some recommendations for using color effectively.

Use color sparingly

A computer display that is lit up like a Christmas tree distracts users from their tasks and makes users feel like they are not being taken seriously. Overusing color makes the display look cluttered (Williges & Williges, 1982) and can confuse users (Narborough-Hall, 1985), make their tasks more complex, increase errors, and reduce user productivity (Keister, 1983). One good rule to keep in mind is that the less frequently a color is used, the better it will grab the user's attention. When it shows up, the user will immediately associate red with warning. Once you se the color red to warn the user, don't use red for any other purpose. Remember, colors are effective maximally when they are used minimally.

The background color affects the effectiveness of the other colors. Pick an effective background color and use only about five colors. Avoid using a solid, black, untextured background. This type of background can cause colored characters to appear to float at different distances relative to the background (NarboroughHall, 1985). If you have to use a solid, black, untextured background, then use white and desaturated red, desaturated yellow, desaturated green, and desaturated blue colors (Weitzman & Neri, 1986). A good choice for a background color is a neutral, textured, dull, light gray (Narborough-Hall, 1985). This type of background helps people keep their attention on the foreground text and graphics, reduces the likelihood of floating characters, and allows the designer to use the color black in the display

Use color consistently with user expectations

Due to our culture and experience, we have gradually built up expectations for what colors mean. For example, traffic signals use the color red for stop, yellow for caution, and green for go. Automobile brake lights and stop signs are red and mean stop. Tow truck lights are yellow and mean caution. Take advantage of these expectations when using color on computer displays. Some well-known expectations follow. Red = warning, stop, error, hot Green = go, good Yellow = caution, slow Blue = cold So, make red a warning that data will be deleted if an action is performed. Use green text or graphics to tell the user that a requested process worked. Make yellow a caution that the next process will be slow. Indicate cold, application-specific objects, like ice, with blue. Use your colors in a way that is consistent with the expectations of your users.

Use colors that contrast well

You may notice that it is easier to read highway signs that have white characters on a black background (e.g., signs warning that liquid propane gas is not allowed in a tunnel) than signs that have white characters on a brown background (e.g., signs announcing recreation areas). The reason is contrast. Contrast refers to the difference in perceived brightness of two objects. The eye focuses most sharply on objects that have different colors and brightnesses (Murch, 1983). This means that you should choose your background and foreground colors with care. For example, if you have a light gray background, don't use yellow for text. The poor contrast between background and foreground will make it harder for the eye to focus on the letters, and the text will be difficult to read. Instead, maximize contrast by taking advantage of the opponent color theory that is described in "How People Perceive Color." Recall that our perception of brightness is determined mostly by the response of the "red" and "green" photopigments. If all colors have the same intensity, then we perceive colors in the middle of the visual spectrum, like green, as brighter than colors at the ends of the visual spectrum, like blue (Murch, 1983). This means that green is a good foreground color and blue is a good background color. Remember, also, that blue-yellow and red-green form high contrast, opponent color channels. Use these opponent colors together. For example, you could use yellow as a foreground text color and blue as a background color. Avoid using together non-opponent colors, like blue-green and yellow-red.

Don't use blue for text

The reason for not using saturated blue for text, thin lines, and high resolution information is simple. The eye is not designed to see it clearly. The lens absorbs some of the light that is transmitted through it. In fact, the lens absorbs almost twice as much light in the blue region of the color spectrum as in the yellow and red regions (Murch, 1983). This problem increases with age because the lens gradually yellows and filters out the shorter wavelengths of light, such as blue.

To focus light onto the retina, small muscles in the eye change the thickness and thinness of the lens. When these muscles are relaxed, the lens focuses middle wavelength light, such as yellow and green, on the retina. To focus long wavelength light, the muscles make the lens thicker. To focus short wavelength light, like blue, the muscles must make the lens thinner. Saturated blue, however, has such a short wavelength that the lens simply cannot be made thin enough to focus it on the retina. Instead, the wavelengths that produce saturated blue focus in front of the retina (Murch, 1984c). This means that small, saturated blue objects, like text, always appear blurry to us. The non-uniform distribution of photopigments among the cones in the retina is biased against blue. About 64% of the cones contain "red" photopigment, 32% contain "green," and only about 2% contain "blue" (Murch, 1983). In fact, the center of the retina, where the lens focuses incoming wavelengths, has almost no cones with "blue" photopigment (Murch, 1984c; Human Factors Society, 1988). This means that we cannot focus on small, saturated, blue objects -- like text. The opponent color theory also explains why we have trouble perceiving small, saturated blue objects. In the opponent color theory, opponent colors are red-green and blue-yellow. Brightness information is transmitted using inputs from the red and green cones. So blue is not involved in transmitting brightness information. This means that the eye has difficulty perceiving differences in the brightness of saturated blue objects. Since brightness differences help the eye to focus on objects, the edges of saturated blue objects will be perceived as blurry (Murch, 1983). So, don't use saturated blue for text or other small objects. Instead, depending on the background, use black, white, and gray because the eye can focus best on these colors (Murch, 1984a).

Don't use saturated colors

Saturated, bright, colors belong on sports cars, not on computer displays. A saturated, bright, cherry red sports car grabs a police officer's attention away from the bland colored cars on the road. Software should do the opposite. Except for warnings, we should allow users to maintain their focus on the text or graphics with which they are working rather than on less important information like function key definitions. There are other reasons why you should not use saturated colors on computer displays. Saturated colors may produce visual fatigue. The wavelengths that produce each color are imaged at different depths behind the lens. To focus the wavelengths on the retina, the lens needs to change shape. This means that we have to refocus the lens to see each color sharply. Saturated colors result in more refocusing. This constant refocusing can cause the muscles that change the shape of the lens to tire, and may produce a sensation of visual fatigue (Murch, 1983). Saturated colors may also produce false perceptions of depth. Saturated colors that are at the same distance from the eye can be perceived to be at different distances. For example, saturated red is perceived to be closer to the person than saturated blue (Murch, 1983). Objects with these saturated colors can appear to float in front of or behind the computer screen. This illusion, called chromostereopsis, results because the eye has to refocus for each saturated color and because the separation of the eyes causes saturated colors to be focused at slightly different lateral locations on each retina. The depth perception illusion results because the lateral difference is similar to the way that the eye senses depth differences. Saturated colors can produce other visual problems. Saturated colors with the same brightness are difficult for color defective people to differentiate. In particular, saturated red is especially difficult for color defective people to perceive (Human Factors Society, 1988). This problem is discussed in more detail in "Use color redundantly." Saturated colors are associated with other visual problems. For example, after viewing strongly saturated green characters for several hours, air traffic controllers have reported seeing red or pink for up to 15 minutes after the session is ended (Narborough-Hall, 1985). So, don't use saturated colors. Desaturate your colors. Since white light is composed of all colors of the visual spectrum, add some white light to your saturated blues, reds, and greens. For example, change your troublesome saturated blue to an easy to see cyan.

Use color redundantly

In a human-computer interface, both the human and the computer can be deficient for color. Although the

term "color blind" is used frequently, "color defective" more accurately describes people who have trouble perceiving colors. This is because only a very tiny portion of the population (about 0.005%) is truly color blind. These unusual people lack at least one of the photopigments used to transmit color information (Cornsweet, 1970). About 8% of men and 0.4% of women are color defective (Robertson, 1979). For these people, the response of the cone photopigments is slightly different than that of most people. Since color defective people often have trouble distinguishing colors that differ only in how they cause the "red" or "green" photopigments to respond, these people make red-green color distinctions based on perceived brightness. For example, red colors appear darker to a person with a deficiency of "red" photopigment cones (Murch, 1984c), so a red traffic light looks darker than a green traffic light. Some of the people who use your application software may have monochromatic computer displays. These people cannot see your color choices because their displays cannot show color. Additionally, many computer printers can print one color only. So, monochromatic computer displays and printers can be considered color deficient. Since people, computer displays, and computer printers can be color deficient, try to use color redundantly with other coding techniques such as location on the display, brightness, shape, texture, and blink. If you cannot make a color code redundant, such as a screen filled with lines of text, then use desaturated colors that consist of different mixtures of red, green, and blue. The blue mixture is especially useful for red-green color defective people (Human Factors Society, 1988).

Let users tailor colors

Color preferences are extremely personal. Colors that you love, someone else will surely hate. This means that using color in a fixed fashion in your application will definitely annoy some users. Therefore, let users tailor colors. Users should also feel like they are in control of the computer. The best way to deal with the personal nature of color preferences while allowing users to feel like they are in control of your application is to give default colors that are consistent with the recommendations of this report and to allow users to tailor colors to suit their personal preferences. The tailoring function should be easy to use. For example, you can let users pick a category of displayed objects, like window title, then let them pick one of 24 different color boxes. One of the color boxes should be labeled as the default color. Another technique lets users create colors. You can let the user pick one of the displayed objects, then let the user manipulate finely graduated hue, brightness, and saturation sliders to define a new color for that object. Be sure to give continuous color feedback as they move the sliders. Then allow users to either enter their new color or go back to the default color.

Summary
Users prefer color displays over monochromatic displays. Use color sparingly, redundantly, consistently with user expectations, and with contrasting background. Additionally, never use saturated blue for text and avoid saturated colors in general. Finally, allow users to tailor colors to suit their personal preferences. Your product is supposed to help people do their jobs. Don't make it harder for people to do their jobs by capriciously adding color. Remember, a peacock may be colorful, but it is still a bird that cannot fly.

References
Cornsweet, T. N. (1970). Visual perception. New York: Academic Press. Farrell, R. J., and Booth, J. M. (1975). Design handbook for imagery interpretation equipment (D180-190631). Seattle, WA: Boeing Aerospace Company. Haber, R. N., and Hershenson, M. (1980). The psychology of visual perception. New York: Holt, Rinehart and Winston. Human Factors Society (1988). American national standard for human factors engineering of visual display

terminal workstations (ANSI/HF standard no. 100-1988). Santa Monica, California: Human Factors Society. Keister, R. L. (1983). Human factors guidelines for the content, layout, and format of CRT displays in interactive applications systems; for the use of help screens and online documentation (HFP 83-12, version no. 4). Dayton, Ohio: NCR Corporation. Murch, G. M. (1983). The effective use of color: Physiological principles. Tekniques, 7(4), 13-16. Murch, G. M. (1984a). The effective use of color: Perceptual principles. Tekniques, 8(1), 4-9. Murch, G. M. (1984b). The effective use of color: Cognitive principles. Tekniques, 8(2), 25-31. Murch, G. M. (1984c). Physiological principles for the effective use of color. IEEE Computer Graphics and Applications, 4(11), 49-54. Narborough-Hall, C. S. (1985) Recommendations for applying colour coding to air traffic control displays. Displays, July, 131-137. Robertson, P. J. (1979). A guide to using color on alphanumeric displays (TR.12.183). Hursley, England: IBM United Kingdom. Tullis, T. S. (1981). An evaluation of alphanumeric, graphic, and color information displays. Human Factors, 23(5), 541-550. Williges, B. H., and Williges, R. C. (1982) User considerations in computer-based information systems (CSIE-81-2). Blacksburg, Virginia: Virginia Polytechnic Institute and State University, Industrial Engineering and Operations Research. Weitzman, D. O., and Neri, D. F. (1986). The use of color in complex information displays. Available from D. O. Weitzman, Environmental Research Institute of Michigan, 1501 Wilson Blvd., Arlington, VA 22180.

GTRI - Intelligent Machines Branch Multimedia in Manufacturing Education Laboratory Phone: (404) 894-3412 Fax: (404) 894-8051 Email: Webmaster Last Modified: Friday, August 15, 1997

Intelligent Machines Branch, GTRI Multimedia Information in Mobile Environments Laboratory Email: Webmaster