General Design Color Guidelines

Use the category links below to navigate this web site. All site pages can also be accessed with the site map.

Design Process

Color Graphics Topics

Color Guidelines

Aerospace

Color Science

Utilities

Site Map

OTHER COLOR DESIGN GUIDELINES

On This Page: • Use color sparingly • Avoid overuse of saturated colors • Color can be a distractor • Use color consistently

In addition to specific visual problems with particular color combinations, there are some more general concerns about use of color in graphic design.

Use color sparingly, for specific purposes. Overuse detracts from the strength of the benefits of color. If color is used to visually group too many overlapping sets of symbols all of the visual grouping can be weakened.

When drawing attention to symbols with color one is taking advantage of the "novelty" effect in human vision. Throughout human perception changes and departures from the norm draw attention. This effect, too, is reduced by repeated use.

In this figure the grouping, labeling, and popout effects are stronger in the left panel than in the right.

An aerospace display intended to show grouping labeling and popout effects. Certain types of symbols are discernable as are critical labels. Less important elements such as area grid marks, have lower luminace contrast and thus do not confuse the display.

Larger Image

An aerospace display intended to show poor use of grouping, labeling, and popout effects. There are too many symbols and a labels. Also, too many items popout.

Larger Image

More on grouping ; More on popout ; More on labeling .

Avoid overuse of saturated colors. The biggest problem with overuse of vivid, saturated colors is that the overall neutralizing effect of overuse is worst for saturated colors (see previous guideline).

There are also several undesirable visual side effects of saturated colors that can sometimes interfere with the intended communications.

Demonstration of simultaneous and successive contrast. After staring at the green and magenta fields, an opposite color afteraffect can be seen.

Simultaneous and successive color contrast are serious concerns in some designs. Successive contrast is a result of looking at a patch of one color for a while, then looking at a different set of colors. The appearance of the second set is altered by the afterimage of the first color.

Stare at the top left blue square for 5-10 seconds, then look at the small outline square below. You should see the aftereffect of the green and magenta fields as faint magenta and green fields, respectively.

Now repeat the experiment using the paler (less saturated) figure on the right. The afterimages should be much less visible--in fact, if you direct your attention to the left-hand figures without moving your eyes from the right-hand figure you can see that the afterimage on the left is stronger even in peripheral vision.

In simultaneous contrast it is not necessary to superimpose an afterimage on the target. The apparent color of a target is always affected by the physical color of adjacent areas, in roughly the same color direction as successive contrast.

The most serious operational problem with simultaneous and successive contrast is possible mistakes in identification of color-coded symbols. On the saturated green and magenta backgrounds the two physically identical squares don't appear identical: The one on the magenta background looks more like the upper square on the green background than the lower square due to interaction with the backgrounds. The influence of the backgrounds is much smaller on the paler backgrounds.
More on Simultaneous and Successive Contrast

RED TEXT SEEMS NEARER?

BLUE TEXT SEEMS FARTHER?

RED TEXT SEEMS NEARER?

BLUE TEXT SEEMS FARTHER?

WHITE TEXT IS ON THE BACKGROUND

The tendency of symbols drawn with longwave light (reds) to appear different in depth from shortwave (blues) symbols is known as "chromostereopsis". The effect is variable from person to person and time to time. Sometimes the red seems nearer and sometimes farther. Sometimes there is no noticeable effect. It's thought to be a result of chromatic aberrations in the optics of the eye. It can be quite distracting in some cases, but is normally not a major usability concern.

BUT NOT WHEN THE BACKGROUND

IS BRIGHTER THAN THE TEXT

BUT NOT WHEN THE BACKGROUND

IS BRIGHTER THAN THE TEXT

(THIS TEXT IS GRAY)

Color can be a distractor in search tasks.

Color can be a tremendous aid in drawing attention (popout) to target elements in search tasks, but it can interfere with search over dimensions that are not color coded or inappropriately color coded. For example, color coding of aircraft classes on ATC displays may interfere with monitoring of potential conflicts between aircraft of different classes.

A white area with 20 or so black T symbols, some inverted.

Scan the left figure, looking for the inverted Ts. Then scan the right. You may find that you are slightly slower on the right. You may also notice a tendency to look back at characters that you've already examined, to check that you didn't overlook any.

Now look in each panel for the pair of inverted Ts that are horizontally aligned.

An area with 20 or so colored T symbols, some inverted. In this case, the use of color actually makes scanning for certain Ts harder.

Use color consistently across all of the user's applications. Assigning the same color to different meanings in different parts of the user's work environment or assigning different colors to the same meaning increases the user's cognitive workload. It also increases the risk of the user making the wrong response for the current context.