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
DESIGNING WITH LUMINANCE CONTRAST

On This Page:  • Background: Visual Effects of Luminance Contrast   • Step-by-Step Procedures for Luminance Selection


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 Back to the top of the page.

Legibility of green text of various luminances on gray backgrounds ranging from black to white. Text is illegible where the text and background luminances are equal. 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.)

Legibility and color saturation of red and green text of various luminances on a light-gray background. The color selection tool provided in this website uses L* as the index to luminance. The next three panels illustrate the impact of L* differences on the legibility and salience of symbols. They show red and green text on dark, medium, and light backgrounds. The text is written at the L* levels indicated by the text. The backgrounds are L* = 90, 60, and 30. A difference of about 20 L* units provides marginal legibility. Urgent data need higher luminance contrast (larger L* differences). The figures also show saturation limitations that arise. Unlike the figure above, all three guns had to be varied to get these text colors in a large range of luminances. These are the most saturated colors within the monitor's gamut at these hues and L*.
More about Luminance and Chromaticity.
More about L* differences on Luminance Contrast page.


Legibility and color saturation of red and green text of various luminances on a middle-gray background. Legibility and color saturation of red and green text of various luminances on a black background.

Step-by-Step Procedures for Luminance Selection Back to the top of the page.

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

Use of luminance contrast to emphasize and de-emphasize text, lines, and symbols. Symbols in several shades of gray are shown on a white background and a black background.

Graph plots the luminances of the text and backgrounds in the adjacent figure against the complete luminance range of the display.

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.

Demonstrates the range of symbol luminances that can be used in a figure with black, middle-gray, and white backgrounds. Graph plots the luminances of the text and backgrounds in the adjacent figure against the complete luminance range of the display. In this example the backgrounds span the entire luminance gamut, giving a dramatic appearance. The price is that the contrast polarity of both the most and least important data symbols has to reverse as the background changes . There is no way to give the symbols the same color appearance on the three backgrounds.

 
Here the background colors are confined to one end of the luminance gamut. With this design it's possible to give symbols the same color appearance on all backgrounds over a wide range of symbol contrasts. Most maps and charts have this luminance design. Graph plots the luminances of the text and backgrounds in the adjacent figure against the complete luminance range of the display. Demonstrates the range of symbol luminances that can be used in a figure with three light-gray backgrounds.

 
Demonstrates the effect of a spatial gradient of grays in the background on the appearance of symbols. Symbols with luminances within the range of the gradient change contrast over their extent. Graph plots the luminances of the text and backgrounds in the adjacent figure against the complete luminance range of the display. In this panel the background spans a continuous range of luminances. The black and gray text and lines have the same luminance at all locations. The black line and text have nearly the same utility and appearance over the whole figure, but the gray, low-luminance-contrast data reverse contrasts and even disappear where the background has the same luminance. Continuous tone graphics such as photographs or shaded-terrain 3D graphics are common backgrounds with luminance gradients.

 
This is the same background as above, but here the low contrast line and text have a gradient of luminances so that the local luminance contrast is the same over the whole symbol. As a result the color appearance of the symbols is as uniform as possible. In this condition the symbols don't move relative to the backgrounds, so the appropriate symbol luminances need only be calculated once. Graph plots the luminances of the text and backgrounds in the adjacent figure against the complete luminance range of the display. Demonstrates that the effect of a spatial gradient of background grays on the appearance of symbols can be eliminated by giving the symbols a similar gradient.

 

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.

Illustrates with colored bars the range of luminances available on a display in each of the primary colors and two-primary colors.

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:
go to this page Luminance Contrast
go to this page Luminance and Chromaticity
go to this page Legibility
go to this page Luminance Contrast Color Guidelines
go to this page Luminance Contrast in Color Graphics



About This Site

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

  Site Curator: Jeffrey McCandless | Responsible NASA Official: Jeffrey McCandless | Privacy Statement


NASA Logo     Ames Research Center Logo     Human Systems Integration Division Logo