Luminance Contrast in Color Graphics

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 Guidelines

Aerospace

Color Science

Utilities

Site Map

LUMINANCE CONTRAST IN COLOR GRAPHICS

On This Page: • Physical Color Gamuts of Displays • Effect of Luminance on Saturation • The Implications for Color Design

This page describes the range of colors produced by a display in terms of their visual appearance. It also offers advice and tools to help non-color-scientists find color combinations that have the desired luminance contrast. Controlling luminance contrast is much more difficult in color graphics than in achromatic. There are complicated constraints among hue, saturation, and luminance on real display devices that can be difficult to keep clearly in mind.
More about Luminance Contrast.

Let's assume that you have already decided what you want the luminance contrasts between the symbols and backgrounds in your display to be. It's straightforward to achieve those contrasts in grayscale, but how do we do it in color?
(See Designing with Luminance Contrast for information on choosing luminance contrasts.)

Our freedom to choose colors at particular desired luminances is limited by two kinds of constraints:
1) The physical color gamuts of displays (the physical lights that the display can produce) and
2) The effect of luminance on saturation (the visual system's response to light at various luminances).

Graph of the 2D color gamut of a CRT display and two laptop LCDs. Small color patches show the locations of the three primary and three secondary colors. The CRT gamut is larger, especially in the blue region.

The Physical Color Gamuts of Displays

The color gamut of a display is simply the entire range of colors that it is capable of displaying.

2D Color Gamut. One often finds the color gamut of a display plotted in 2D coordinates. This CIE x,y plot shows the 2D gamuts of a CRT monitor and two laptop LCDs. The color patches show the CRT colors at their maximum luminances (which aren't equal).

While these are the correct chromaticity coordinates for the displays' colors, this method of plotting can be very misleading--these colors are not all available at the same luminance. Saturated blues and reds are much less luminous than greens and yellows.

Graph of the 3D color gamut of the same CRT display as in the previous figure. Adding the luminances of the colors reveals that the primary and secondary colors have very different luminances. The full 2D range shown in the previous figure is only available for dark colors.

3D Color Gamut. Here the 3D color gamut of the same CRT is shown with the luminances, Y, plotted against the same x,y grid as above. Now we can clearly see, for example, that the maximum luminance of the blue primary is only 1/10 that of the green primary.

This bar chart illustrates the relations among the luminances of the one- and two-primary colors. I've added the grayscale and a desaturated blue for comparison.

Bar graph showing the luminances of the three primary and three secondary colors. Shading on the bars shows the appearances of the various luminances along the graph.

Graph of the 2D color gamut of a CRT display. The gamuts at each of nine luminances are superimposed. As luminance increases the gamuts get smaller. Color squares with arrows show the colors at various points within the gamuts.

This 2D plot shows horizontal sections through the 3D xyY surface, with patches showing the highest-available-luminance colors at each chromaticity as one moves up the surface. Each section is filled with the correct shade of gray for its neutral point.

This illustrates a second property of the 3D gamut: the higher luminances are only available at low purities (and therefore low visual saturations).

Why are the luminances of the primaries different?. The primaries have been given these luminances by design, to achieve white alignment of the monitor. This is one of the requirements for portable graphics files to display properly on any display. Early designers of computer displays decided that equal R, G, and B digital codes should produce a particular neutral chromaticity, the "alignment white" of the monitor (usually 6500K or 5300K). Once the white alignment color is decided and the chromaticities of the three primaries are chosen the maximum luminances of the primaries must be set to the values shown above. This is simply because these are the luminances of the primaries that will mix to give the alignment white.
More about Display Physics

The Effect of Luminance on Saturation

The second major constraint that affects our freedom to choose colors at particular desired luminances is the visual loss of saturation at low luminances. The 3D gamut above captures the loss of saturation at high luminances--the colors converge on white. Over a range of low luminances, though, the gamut is the full triangle between the chromaticities of the primaries. Over this range the monitor is physically able to produce its maximum range of chromaticities as the luminance decreases toward zero, but to the human visual system the lights all become barely distinguishable from black. This visual effect is illustrated by the dark colored squares at low luminances in the 3D gamut figure.
(In addition to the visual limitation, the display's gamut shrinks at the very lowest luminances, converging to the chromaticity of the black-level leakage light that is emitted at data = 0,0,0. This physical shrinkage is not visible in the 3D gamut plot.)

We can represent this visual phenomenon graphically by plotting the gamut in a different standard coordinate system, the CIE L*u*v* coordinates.

3D graph of the gamut of a CRT display plotted in L*u*v* coordinates, a color appearance space. The range of colors reaches higher saturations in the middle lightnesses, with greatly reduced saturations at higher and lower lightnesses.

This is a plot of the 3D gamut of the same CRT monitor in CIE L*u*v* coordinates. This transformation was developed as an approximation of a visually uniform space. As in the xyY plot above, the blue primary is in front, red is at the back right, green is at the left, and white and black are at the top and bottom, respectively. Here, however, the colors converge on black as the brightness variable, L*, goes down, modeling the loss of saturation of pure lights as the luminance decreases.

The panel below shows the colors in a vertical slice from the origin toward the red corner of this color solid.

A 2D section through the red portion of the 3D gamut of a CRT display in L*u*v* coordinates. Small color squares show the colors throughout the 2D section. Colors range from black to white from bottom to top, respectively and from gray to saturated red from left to right, respectively.

The Implications for Color Design: Selecting Colors with the Right Luminances

The difficulty of selecting colors with the right luminances is now plain: Suppose that you can only get enough luminance contrast on your bright backgrounds if your symbol color has an L* of 20 or less. You will be unable to get a bright red warning color. To get an adequately saturated warning color you must set up your background luminances such that symbols of L* = 50 to 70 will have enough luminance contrast with the background to be clearly legible. To make the color design problem even more complicated, the highly saturated colors are at different L* for other hues.

These constraints on the colors in the display gamut make selection of symbol and background colors with particular desired luminances more complicated than in a grayscale design. We need to choose colors such that the symbol colors will have sufficient contrast on all of the possible background colors. At the same time, the symbol colors must be discriminable and possibly identifiable. These various constraints can sometimes be very difficult to satisfy.

Color selection would be somewhat easier if we could interactively view the display's gamut and select our colors in L*u*v* space. We offer a tool on this website that lets you select colors from L*u*v* and preview your selected symbol and background combinations. It has two selection panels that are different cross-sections of the above L*u*v* gamut:

	One panel lets you pick an L*, then shows you the available colors at that brightness. Clicking the mouse on a color displays it as the color of a symbol or background.		The second panel lets you pick a hue, then shows you all of the available colors at that hue. When you choose one the tool then previews it as a symbol (or background) against your previously chosen backgrounds (or symbols).
Go to the Color Tool