ACM Interactions

The challenge of achieving good legibility and readability of color displays in all computer graphics (including all imagery and typography) is a constant one. Especially when computer-based displays show up in more and more unexpected places, like your eyeglasses, on t-shirts, and on vehicle windshields, not just on desktop computer screens and mobile device displays. Just because user-experience (UX) design/human-computer interface (HCI) design has added layers of complexity does not mean that fundamental color issues have gone away.

UX/HCI designers may be interested in some basics of achieving effective color communication, designing the right hues, values (lightness), and chromas (saturation). Effective use of color can offer these advantages:

• Call attention to specific data or information
• Identify elements of structures and processes
• Portray natural objects realistically
• Depict the logical structure of ideas and processes
• Portray time
• Increase appeal, believability, memorability, and comprehendibility
• Reduce errors of legibility or interpretation
• Increase the number of dimensions for coding data
• Show qualities and quantities in a limited space

At the same time, color has these drawbacks or disadvantages:

• Requires more expensive and complicated design equipment
• May not account for color-deficient viewers/users (for example, about eight percent of Caucasian males)
• Causes visual fatigue and afterimages induced by strong colors
• Contributes to visual confusion due to complexity and potency of color phenomena
• Invokes negative cultural associations to some colors
• Exhibits complexity of cross-disciplinary and cross-cultural connotations

Despite these possible drawbacks, color displays are almost everywhere. Here are some basic guidelines derived from “The Ten Commandments of Color,” one of my previous publications cited in the Bibliography. 

1. Use a maximum of five, plus or minus two, colors.

To the general question, "How many?" the general answer is often “seven, plus or minus two.” However, with respect to color, it seems best to be conservative. For novice viewers, four distinct colors seem appropriate. This number allows extra room in short-term memory (about 20 seconds), which can store five words or shapes, six letters, seven colors, and eight digits.

For aesthetic purposes, such as design style, emotional expression, or realism, even more colors will be required. Although most computer displays today can provide many millions of colors, and the average human being can discriminate about 7.5 million colors, this simple rule radically reduces the complexity of the problem. Use spectral order in color coding, i.e., the order of colors in the rainbow (some use the mnemonic Roy G. Biv: red, orange, yellow, green, blue, indigo, violet). Studies have shown that viewers see a spectral order as a natural one and would select red, green, and blue as intuitive choices for the foreground, middle, and background layers of a multi-layer display.

2. Use foveal (center) and peripheral colors appropriately.

Use blue for large areas, not for text typography, thin lines, or small shapes. Blue-sensitive cones are the least numerous of the color receptors in the retina, and the eye's central focusing area, the fovea, contains relatively few of these blue-sensitive cones. Blue is good for screen backgrounds because we can’t detect pixels as readily. Use red and green in the center of the visual field, not in the periphery. The edges of the retina are not particularly sensitive to these colors. As devices like Google’s glasses become more ubiquitous, this issue becomes more important to consider. If red and green are used at the periphery, some signal to the viewer must be given to capture attention, for example, size change, blinking, etc. Use adjacent colors that differ by use and value (lightness). Do not use adjacent colors that differ only in the amount of blue. The limited number of blue cones is again responsible for this rule. The edge between the two colors will appear fuzzy.

3. Use colors that exhibit a minimum shift in color/size if the colors change in size in the imagery.

Colors will appear to change their value and chroma according to the size of the area of color. Color interactions with the background fields become more pronounced and illusions of similar colors from different colors or illusions of different colors from similar colors can appear. Use light text, thin lines, and small shapes (white, yellow, or red) on medium-dark and dark backgrounds (blue, green, red, or dark gray) for dark viewing situations. Typical long-distance or low-ambient-light viewing situations are those for slide presentations, low-lit rooms, etc. Reserve the highest contrast in figure-field relationships for text typopgraphy. Use dark text, thin lines, and small shapes (blue or black) on light backgrounds (light yellow, magenta, green, blue, or white) for light viewing situations. Reserve the highest contrast in figure-field relationships for text typography. 

4. Do not use high-chroma, spectrally extreme colors simultaneously.

Some figure-field relationships, like strong contrasts of red/green, blue/yellow, green/blue and red/blue, create vibrations, illusions of shadows, and after-images. 

5. Use familiar, consistent color codings with appropriate references. 

For example, familiar Western denotations are the following:

• Red refers to stop, danger, hot, or fire.
• Yellow refers to caution, slow, or test.
• Green refers go, ok, or clear.
• Blue refers to cold, health/finance, or water.
• Warm colors refer to action, response required, or spatial closeness.
• Cool colors refer to status, background information, or spatial remoteness.
• Grays, white and blue refer to neutrality.

Use color for quantitative, as well as qualitative, coding. The degree of color change can be linked to some magnitude change in a process or event being displayed. This redundant coding can help clarify and emphasize the meaning, for example, in a chart. Color change can also replace bar or line charts when the viewer is interested in current status, not history. A single small area changing in color, rather than a bar or line, can greatly economize space. Use color connotations with great care, because connotations vary greatly among different kinds of viewers. For example, consider some of the connotations of the color blue:

• For American movie audiences: tenderness, pornography
• For financial managers: corporate qualities, reliability
• For health care professionals: death
• For nuclear reactor monitors: coolness, water

Here are some typical associations of color in dramatic presentations:

• High illumination implies hot, active, and comic situations.
• Low illumination implies emotional, tense, tragic, melodramatic, and romantic situations.
• High-chroma implies emotional, tense, hot, comic, and melodramatic situations.
• Warm hues (red, orange, and yellow) imply active, comic situations.
• Cool hues (green, blue, violet, purple, and gray) imply tragic and romantic situations.

The correct use of color requires careful analysis of the experience and expectations of viewers/users.

6. Use the same color for grouping related elements.

Do not use a particular color for any elements not related to the others. The viewer can sense this relatedness by color over space and over time (sequences of images). Consequently, it is important to be complete and consistent. For example, command-and-control colors in menus should not be used for information coding within a work situation area unless a specific connection is intended. Similar background colors of two areas can subtly help viewers understand conceptual links of the two, even without more explicit verbal cues.

7. Use the same color code for applications, training, testing, and publications.

Once color coding is established, the same colors should be used throughout the life cycle of knowledge generation and dissemination. This color continuity may require the colors to appear in different media, which may necessitate careful selection of colors that can be displayed consistently. The color gamuts (available color ranges) of different media are often not identical.

8. Use high value, high saturation colors to draw attention.

The use of bright colors for danger signals, attention getters, reminders, cursors, etc. is entirely appropriate. High-chroma red or blue alerts seem to elicit faster response than does yellow or yellow-orange. When too many figures or background fields compete for the viewer's attention, confusion arises. The hierarchy of highlighted, neutral, and lowlighted states for all areas of the visual display must be carefully designed to maximize simplicity and clarity. Use brighter color for older viewers or for those who have viewed displays for very longer periods of time. Older viewers need higher brightness levels to help distinguish colors. Over very long viewing periods, even younger viewers accommodate to brightness levels, and some increase may be required for extended periods of viewing.

9. If possible, use redundant coding of shape as well as color.

Redundant coding helps those with color deficiencies and makes the display more resilient to color distortions caused by ambient light changes or by medium-to-medium conversion. 

10. Use color to enhance black-and-white information.

With respect to learning and comprehension, color is superior to black-and-white displays in terms of processing time and the viewer's emotional reactions, but there is usually no difference in the viewer's ability to interpret information. People do not learn more from a color display, though they may say they do. The crucial factor is that color is more appealing. Also, color information is easier to remember. While the above rules may not solve most of the precise color selection problems that UX designers and users face, they may be able to point people in the right direction.

In some cases UX education in color is often minimal or missing from designers' curricula. Some teachers may say there is just not enough time to cover all topics, but color is fundamental to our human experiences.

Bibliography

Marcus, Aaron (1992). “Color.” Chapter 4, Graphic Design for Electronic Documents and User Interfaces, Addison-Wesley, Reading: MA, 1992, pp. 74-96.

Marcus, Aaron (1986). The Ten Commandments of Color. Computer Graphics Today, 3(11), 7ff.

Marcus, Aaron (1982). “Color: A Tool for Computer Graphics Communication.” In D. Greenberg, A. Marcus, et al. The Computer Image. Reading, MA: Polaroid Corporation, Addison-Wesley, pp. 76-90.

Aaron Marcus