Last Resorts: Outlining/Infills

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

LAST RESORTS: OUTLINING/INFILLS

On This Page: • Isolation of Symbols from Background • Infills • Outlining

This page describes some graphic tricks that can be used to circumvent unusable symbol/background color combinations when there is no other choice.

For most moderately complicated color graphics designs it should be possible to find background and symbol colors that are all usable. This means that they all have luminance contrasts, saturations, and chromatic separations that make them legible, discriminable, identifiable and uncluttered. Sometimes, though, the complexity is so great or the constraints so confining that colors must be used that don't satisfy all of these criteria. In these circumstances there is no choice but to turn to special graphic tricks. These are "last resorts" because they have costs in terms of complexity and graphic real estate and should be used only when all other options have failed.

Isolation of Symbols from Backgrounds

When the problem is strong color interaction or inadequate luminance contrast between the symbol and background there are several ways to isolate the symbol from the background.

Infills. Infilling refers to placing the text or symbol on top of a small panel of contrasting color. The main advantage is that the color of the panel can be chosen independently from the background so that there is no color interaction and adequate luminance contrast. A second advantage is that the panel provides a larger color area than the text or symbol and can provide a stronger label or alerting function by assigning the label or alerting color to the panel rather than the symbol.

The disadvantage is that the label takes up more display real estate, making it harder to avoid occluding other information. In air traffic control displays, for example, the labels for aircraft have to be manipulated to keep them from overlapping, either by manual dragging or automatically by software. In either case more effort is required.

2 areas showing a variety of labels on a radial gradient background. On the left are labels that are more legible due to the use of a color to create an isolated background for the text.

left: The labels are hard to read where the text and background have the same luminance.

right: Infills provide adequate luminance contrast, but take up more space and occlude other labels.

Display of text on a radial background with transparent label backgrounds. If too many transparent labels overlap, they can become unreadable.

Making the infills transparent can sometimes help, but there are limits to the amount of usable overlap.

The occlusion problem can be overcome to some extent by making the infill panels transparent, but there are limits. The transparency decreases the luminance contrast between the label and the panel. The edge of the infill of the topmost label interferes with the legibility of any underlying text due to pattern masking. A stack of more than two labels may be illegible. Infills are used in some European ATM designs.

Outlining. Outlining is a variant of infilling in which each letter or symbol is outlined with a narrow band of contrasting color. Outlining occupies less space than infills, so it occludes less of the surrounding detail. Outlining is widely used in cartography. Light text colors are typically outlined in black, dark text colors in white.

Text with and without high luminance contrast outlining. The outlined items are more legible.

Here the lines and text without outlining are difficult to read. The high-luminance-contrast outlining makes them more legible.

Small text samples with high luminance contrast outlines can be harder to read.

At small sizes it can be difficult to discriminate and identify the colors of the enclosed symbols.

Different levels of luminance contrast outlines can convey different levels of salience.

Salience can be manipulated with luminance contrast in the same fashion as with non-outlined symbols, but the luminance of the outline is adjusted rather than the body of the symbol.