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.
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.
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
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.
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:
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.
Multiple achromatic background colors, with fixed symbol and background positions
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.
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.
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
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
"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,
Luminance and Chromaticity
Luminance Contrast Color Guidelines
Luminance Contrast in Color Graphics