To Skip Navigation Press Enter.Link to the Color Usage Site Home Page
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 Tool Color Guidelines Aerospace
Color Science Utilities Site Map
Link back to the CURL Home Page

CHOOSING BACKGROUND COLORS

On This Page:  • Three Background / Contrast Schemes   • Pros and Cons of the Three Schemes
 

This page discusses the usability issues in choosing background colors for a graphics page.

Before the colors for a graphics page can be chosen, one must choose the polarity of the luminance contrast between the symbols and background(s). For simple graphics the background can be chosen relatively freely and still have a reasonable range of usable colors for the symbols. As the complexity of the graphic grows the constraints quickly narrow the options for usable colors. In the most complex displays there may be no completely satisfactory choice at all. In that case the designer will have to resort to emergency "last resort" graphics tricks.

The constraints that accumulate are largely due to two factors:
1) The limited ranges of luminances of colors that have sufficient saturation. At both high and low luminance extremes colors lose saturation and become hard to discriminate, especially colors of small symbols.
2) Obtaining the required luminance contrasts in the desired hues.

Three Background/Contrast Schemes Back to the top of the page.

When there is a single background color there are three basic luminance-contrast designs, each with its own pros and cons.

All Positive Luminance Contrast--"radar-like" graphics. In this simple case symbols can have usable luminance contrast for all colors except those in the blue corner of the gamut (the blue at the right has been desaturated to increase its luminance, making it more legible).
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Graph compares luminances of text and background in the positive luminance contrast figure to the entire range of luminances available on the display. The text with least luminance contrast is indicated by a line connecting its luminance with that of the background.

All Negative Luminance Contrast--"map-like" graphics. On a bright background dim symbol colors (e.g., blue, black) are clearly legible. High-luminance colors need to be darkened (green, yellow).
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Graph compares luminances of text and background in the negative luminance contrast figure to the entire range of luminances available on the display. The text with least luminance contrast is indicated by a line connecting its luminance with that of the background.

Mixed Luminance Contrast. On backgrounds of intermediate luminance symbols can be either brighter or dimmer than the background, but the maximum luminance contrast available is reduced. More colors are problematic than with the unidirectional designs.
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Alphanumeric Alphanumeric
Graph compares luminances of text and background in the negative luminance contrast figure to the entire range of luminances available on the display. The text with least luminance contrast is indicated by a line connecting its luminance with that of the background.

Multicolored Backgrounds. The three basic schemes were described in the simplest case, with a single background color, but in many modern graphics the backgrounds include area variables coded in several colors or even images. If there are more than a few background colors or the symbols move from background to background it is desirable to use a small range of background luminances so the design will fit into one of the above three schemes. This allows simple and systematic control of luminance contrasts.
More about Designing with Luminance Contrast

Pros and Cons of the Three Schemes Back to the top of the page.

This section discusses some advantages and disadvantages of each of the three schemes and suggests possible solutions for the problems.

Color Coding of Area Variables. Color coding in the all-positive and all-negative designs is tightly constrained by the luminance-contrast requirements. To be highly legible symbols must have high luminance-contrast with the backgrounds. The all-positive and all-negative designs both allow symbols to have high luminance contrasts, but they allow only desaturated colors for the area variables in the background. The pale, pastel colors of the all-negative scheme are familiar from printed maps (below, left). In the all-positive scheme (below, center) the various background hues have a murky, blackish appearance. In both cases the desaturated colors need to be discriminable and identifiable. In either case reflected ambient light can further desaturate the background colors. Care must be taken that the colors remain discriminable and identifiable when desaturated by the highest anticipated amount of reflected ambient light. Greater saturation of the backgrounds can be achieved if the luminance range is increased, but this, in turn, reduces the range of possible luminance contrasts for the overlying symbols.
More on Reflected Light

The mixed luminance-contrast design (below, right) allows more highly-saturated, highly-discriminable background colors than the all-positive and all-negative schemes. However, saturated colors should be used sparingly to avoid distraction from the color coding of symbols and perceptual distortion of the colors of symbols. The main problem with this scheme, though, is finding adequate symbol/background luminance contrasts for all symbol/background hue combinations.
More on overuse of saturated colors

text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text

Adaptation Level . The background luminance is the main determinant of the user's luminance adaptation level. In the all-negative contrast design the background (white) luminance is 30-100 times that of the all-positive design (black). On dim displays this can mean that the user's contrast sensitivity and acuity will be slightly better with the all-negative design.

When the user is required to look back and forth between brightly illuminated displays (e.g., white printed materials under sunlight) and dim displays the brief moment required for the visual system to adjust to the dimmer background each time can be distracting and may slow tasks. The luminance difference between black and white backgrounds is small compared to the luminance differences that can be produced by variations of illumination. Use of a black background in office settings has sometimes been thought to contribute to fatigue, but there currently appears to be little evidence of a physiological basis for this view.

Interference from Reflections. Light from the user's surroundings is reflected from the display surface and optically added to the pattern of light from the display. How much this light interferes with the usability of the display depends on a number of factors. These include the luminances and shapes of the surrounding sources, the angles of reflection, the dispersion properties of the display surfaces, and the luminances of the graphics presented on the display . The reflected light is generally added in equal amount to both the light and dark parts of the graphics and reduces the luminance contrast. The reduction in the luminance contrast of the graphics is equal for black or white backgrounds, so there is no luminance-contrast reason why black or white should be preferred from a legibility standpoint.

The white background does have a definite advantage over the black with respect to distraction and pattern masking by reflected light. When the reflected light is localized on the display (specular or semi-specular reflection) it can draw the user’s attention from the displayed information and interfere with it through pattern masking. This is less of a problem with the white background than the black because the luminance contrast of the reflection itself (as opposed to the graphics) is less on a bright background than on a dim. On the other hand, making the reflections less salient may lessen the user's awareness of the reduced luminance contrast and color purity of symbols where the reflections are superimposed.

Figure illustrates the effects of unwanted reflections on graphics with light and dark backgrounds. The reflections reduce the luminance contrast equally in the two designs, but the reflections are more distracting on the black background. The superimposed rectangles and ovals here simulate reflections of light sources in the room. The horizontal lines simulate graphics being presented on the display. The reflections reduce the luminance contrasts of the horizontal line patterns equally on the black and white backgrounds. However, the outlines of the reflections themselves are much more visible on the black background. The distractions are especially problematic for moving reflections (e.g.,white shirts on people).

Problem Colors
. The three contrast schemes also differ with respect to which symbol colors are problematic. On white backgrounds yellows often have too little luminance contrast, but blues have high luminance contrast. On black backgrounds the situation is reversed: pure blues have too little luminance contrast, but yellows are okay. (On some newer LCD displays this may be less of a problem thanks to a shifted chromaticity of the blue primary.)

text text text text

text text text text

text text text text

text text text text

text text text text

text text text text

text text text text

text text text text

text text text text

text text text text

There are a number of solutions for either case, several of which are illustrated below, but they involve some compromises.
More about Designing with Blue.

Illustrates that pure blue text is legible on a black background if it is outlined in white. Yellow text is legible on a white background if it is outlined in black.

Some colors, such as brown and olive green, are perceived best when the surrounding area is of higher luminance. These colors can be difficult or impossible to obtain on dark backgrounds.

On backgrounds of intermediate luminance any of a wide variety of colors may have too little luminance contrast, depending on the background luminance. Our color selection tool can help the designer visualize which symbol colors are problematic on particular backgrounds and choose appropriate alternatives.
Color Tool.

Generally the problem colors for the chosen background require special graphic techniques.
More about Last Resorts: Outlining / Infills).


Related Topics:
go to this page Designing with Luminance Contrast
go to this page Reflected Light
go to this page Designing with Blue
go to this page Color Tool
go to this page Last Resorts: Outlining / Infills



About This Site

Home
| Design Process | Color Graphics Topics | Color Tool | Guidelines | Aerospace | Color Science | Utilities

  Site Curator: Richard Mogford | Responsible NASA Official: Richard Mogford | Privacy Statement


NASA Logo     Ames Research Center Logo     Human Systems Integration Division Logo