 |
| CHOOSING BACKGROUND COLORS 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: Three
Background/Contrast Schemes
When there is a single background color there are three basic luminance-contrast designs, each with its own pros and cons. |
||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
| 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.
Pros
and Cons of the Three Schemes 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. 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. |
||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
| 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. |
||||||||||||||||||||||||||||||||||||||||||||||
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.) |
||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
| There are a number
of solutions for either case, several of which are illustrated below, but they involve some
compromises.
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. Generally the problem
colors for the chosen background require special graphic techniques. 
Related Topics: 
Designing
with Luminance Contrast
Reflected
Light
Designing
with Blue
Color
Tool
Last
Resorts: Outlining / Infills
| ||||||||||||||||||||||||||||||||||||||||||||||
