Luminance Contrast Color Guidelines

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

LUMINANCE CONTRAST COLOR GUIDELINES

In terms of color usage, luminance contrast is the most important determinant of legibility of symbols and text, so it's no surprise that luminance contrast frequently appears in color guidelines. Most of the guidelines are directed at assuring sufficient contrast, and this is certainly a first-order concern. However, care must be taken to avoid unnecessarily limiting the designers' freedom to intentionally reduce luminance contrast in the interests of labeling and attention management.
More about Luminance Contrast.

The minimum luminance ratio between symbols and background shall be 3:1. Various forms of this guideline are nearly universal in guidance documents, differing mainly in the quantity required and in which statistical measure of luminance contrast is used. This is one of the most important usability issues related to color choices.

A variety of colored text statements on a
green background. The result is that despite large chromatic contrasts, legibility is severely hindered due to low luminance contrast.

The problem it addresses is easily demonstrated. In spite of the large chromatic contrasts between the lines of text and the green background none is very legible at the point where the text and background luminances are equal. The black line has higher luminance contrast with the background and can be read (it would be even easier to read with a brighter green).

There is no question that this is an important problem, but there are a number of design issues involved that require further elaboration. When producing guidelines, caution is required to avoid such narrow wording as to interfere with good information management.

One issue concerns the varying importance of data and the need to conserve the users' attention. Some data are safety-critical or mission-critical and also urgent. Others aren't urgent, but are critical. Still others are useful as context, but shouldn't distract from the more urgent data. Lowering the luminance contrast of the less important data is often an effective way to reduce clutter without completely eliminating the contextual information.
More on Attention Management.

An area of white with black and grey symbols and an area of black with white and grey symbols demonstrates the ability to convey importance of data through different levels of luminance contrast.

A compromise guideline could possibility be reached by inserting such words as "mission-critical" or "safety-critical" in the requirement. The resulting guideline would require more judgment in its application.

Another issue concerns displays with multiple background colors. Symbols must have the minimum luminance contrast with all possible backgrounds. In dynamic displays (e.g., moving maps) all possible superpositions of symbols and backgrounds must be considered. This can be very challenging with chromatic backgrounds and symbols.
More on Designing with Luminance Contrast ; also see our Design of Cockpit Graphics Example.

Yet another complicating issue is the influence of the users' viewing environment on the luminance contrast of displayed symbols. (See next guideline).

None of these complicating issues is a reason to eliminate a minimum luminance contrast guideline. The dependence of legibility on luminance contrast is real. They do indicate that a simple one or two sentence statement isn't sufficient. Sophisticated and adaptable guidance about the design context is essential for the guideline to be useful to the designer and design reviewer.

The color set should be selected for the user's specific type of monitor and specific ambient environment. Ambient light from the user's workspace reflects off the surface of the display. The reflected light reduces the luminance contrast between symbols and backgrounds. Display devices differ in the amount of light that they reflect, but the brighter the ambient lighting, the bigger the reduction in luminance contrast. The geometry between the light sources, the viewer, and the display is also important. A color design that is legible in a dim or dark room may be illegible under brighter lighting with bad lighting geometry .

The designer also has to consider the users' display equipment. Different display devices have different properties. Some flat panel displays have different luminance contrasts from different viewing angles, and the effect can be different for different colors. The legibility of a given luminance contrast is reduced at low mean luminances. The loss of luminance contrast due to reflected light is also worse for low mean luminances.
More about Display Hardware and Software; More about Reflected Light.

Pure blue should not be used for fine detail or background. The problem that this common guideline addresses is illustrated by the two squares on the left. The black text on the pure blue background and pure blue text on the black background are barely legible at any size.

text text text text

The usual explanation cites two problems with blue.

1) Blue has low luminance. In order for a display to appear white when all three primaries are at their maxima the blue primary must have only about 1/10 the luminance of the green primary. The problem is made worse by the fact that the blue primary stimulates mostly the short-wave cones, which contribute little to the visual process that forms edges (like those that make up letters). Thus any graphics that differ from the background only in the blue primary will be hard to read.
More on Designing with Blue.

2) Visual resolution of fine detail is poor for blue.

The solution is to provide adequate luminance contrast. This can be done as illustrated, by substituting white (or some other high luminance color) for the black. On the white background the small blue text is nearly as legible as the black text. Other options include using a pale blue (essentially adding yellow light, increasing the luminance) on the black or outlining the text.
More on Last Resorts: Outlining / Infills.