Académique Documents
Professionnel Documents
Culture Documents
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.
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.
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.
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
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).
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).
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