The most important aspect of color choice in graphics is luminance contrast. On this page we demonstrate some of the reasons it's important and present step-by-step guidance for development of a usable luminance-contrast scheme.

Loosely speaking, luminance contrast is the physical variable that controls the visual brightness difference between the symbol and its immediate background. Sufficient luminance contrast is a prerequisite for legibility. Manipulation of luminance contrast is also one way that users' attention can be managed.
More about Luminance Contrast

Designing with luminance contrast can be easy, as in simple grayscale graphics, or extremely difficult, as in map-like color graphics. There are complicated constraints among hue, saturation, and luminance on real display devices. Their complexity makes it hard for the designer to keep luminance contrasts under control as individual colors are chosen. The color tool in this site was designed to help with this problem.
Color Tool

Background: Visual Effects of Luminance Contrast

The figure at left shows the complete range of possible background luminances (horizontally) and pure green gun luminances (text lines). Several important aspects of luminance contrast are visible: 1) Where the luminance difference between text and background is zero the text is unreadable; 2) that point is different for every background luminance; 3) at each background luminance the text becomes more prominent as one moves (vertically) away from the equal luminance point; 4) the saturation of the text color depends on its luminance and luminance contrast. (Hue also changes slightly with luminance changes, but the effect is small for the chromaticity of this text, the green gun alone.)

Step-by-Step Procedures for Luminance Selection

We assume here that you already have an inventory of your data types, ordered by the importance/urgency of each data type (see Designing a Color Graphics Page (Checklist). The procedures for selecting luminances will vary according to your background color selections and whether the layers of backgrounds and symbols remain fixed or move relative to each other. We'll consider four situations in order of increasing complexity:
1) A single, achromatic background color;
2) Multiple achromatic background colors, with fixed symbol and background positions;
3) Multiple achromatic background colors, with moving symbol and background positions;
4) Chromatic backgrounds.

Single, achromatic (gray) background color

1) Select the background gray. Choosing Background Colors

2) Select symbol colors. If all symbols are to be given the same luminance and chromatic color, then legibility is the main concern. Unless there is a good reason, the symbol luminance should be as different as possible from the background (maximum possible luminance contrast).

If luminance contrast is also being used to manage the users' attention the luminance contrast of the symbols for the lowest priority class should be chosen to be just reliably visible under all viewing conditions (reflected light can reduce the luminance contrast. The highest priority data should be given the highest possible luminance contrast. If the highest classes are true emergencies, consider using flashing or blinking to attract attention.
More about Reflected Light
More about Blinking, Flashing, and Temporal Response

This example probably approaches the limit both in terms of the legibility of the least important data and the number of identifiable luminance-contrasts. The diagram above illustrates the positions of the background and symbol luminances along the range of available display luminances.

Multiple achromatic background colors, with fixed symbol and background positions

With fixed symbol and background positions the symbol colors can be chosen independently for each background color, so there are only a few limitations beyond those for the simplest case above. If symbols that lie on different background colors need to have the same color appearance, the luminances of the symbols may need to be slightly different to compensate for simultaneous contrast effects of the different backgrounds. Also, even when two symbols have the same brightness they may still look different if one background is brighter and the other darker than the symbols, due to the reversed contrast polarities.
More about Simultaneous and Successive Contrast

If individual symbols or alphanumeric strings must extend across multiple background colors the range and position of the background colors in the luminance gamut become still more important.

Multiple achromatic background colors, with moving symbol and background positions

This is the most complicated of the applications with achromatic backgrounds, with the relative locations of symbols and backgrounds varying over time (as in e.g., "moving maps"). The luminance contrast problems are the same as in the previous case, but now every movable symbol and movable background can appear against any of the backgrounds. If a symbol is to maintain a constant color appearance its luminance contrast must remain the same. This requires that its luminance be continuously calculated from the local background luminance. While this obviously raises software issues, the color design requirements are the same as in the previous, static case. The design problem is easier if all backgrounds are held to as narrow a range as possible at one end or the other of the luminance gamut. Requirements for color coding of backgrounds can conflict with that approach.

Chromatic backgrounds

For each of the above cases there is a second corresponding case in which both the symbols and backgrounds are chromatic. For each of the chromatic cases the luminance design goals are the same as for the achromatic case. The luminance contrasts that are optimal for legibility and attention management in a grayscale version will also be optimal for the chromatic version. This is the origin of the design adage "Make it right in black-and-white".

BUT that is easier said than done: On most display devices the ranges of luminances available for the various chromaticities are very different. As a result there are often complex interactions among legibility, attention management, and color coding goals. This can severely limit the designers options.

This bar chart illustrates the relations among the luminances of the one- and two-primary colors of a CRT display. The display's gray scale and a desaturated blue are included for comparison. Colors near the red and blue corners of the gamut are only available at much lower luminances than those in the green, yellow, and white regions of the gamut. The pale blue column illustrates that those red and blue hues can be made brighter by desaturating them (by adding light from the other display primaries) but only within limits. The figure also illustrates that pure colors also lose their saturation at low luminances.

As a result, it can be quite difficult to select a set of symbol and background colors that satisfies the desired luminance contrasts while providing enough saturation to achieve the goals of labeling with color.

The inequality of the luminances of the primaries can't be easily avoided. It is not a property of this physical display only. It stems from a combination of conventional graphics practices and color vision properties. It's desirable for graphics reasons that the display medium be "white aligned", i.e., that equal data values applied to each of the primaries yield achromatic light--the grayscale. However, lights from the extremes of the visual spectrum, reds and blues, are much less visually efficient at producing brightness than at coloring mixtures. For example, when mixing "yellow" light with "blue" light to get "white" light, one needs much more yellow light (in terms of luminance and brightness) than blue. For this CRT display a 6500K white is obtained by mixing the green, red, and blue primaries in luminance ratios of approx. 10:4:1, respectively.
More about Luminance Contrast in Color Graphics

Related Topics:
Luminance Contrast
Luminance and Chromaticity
Legibility
Luminance Contrast Color Guidelines
Luminance Contrast in Color Graphics

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