Designing with Blue

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

DESIGNING WITH BLUE

On This Page: • Legibility and the Blue Primary • Other SWS-Cone Phenomena

On this page we discuss some special usability concerns about color combinations that differ only in the blue primary.

There are special usability issues to be considered in using blue and yellow in graphics. Legibility, temporal response, spatial localization and perception of geometrical shapes are all somewhat compromised in patterns in which the only differences are in the short-wave-sensitive (SWS, "blue") photoreceptors. In graphics terms this mostly applies to color pairs that differ only in the blue primary.

Visual responses that involve the SWS photoreceptors have different psychophysical properties from the other two cone systems, and the SWS receptors have special anatomical and physiological characteristics. There are fewer SWS receptors than middle- ("green") or long-wave-sensitive ("red") photoreceptors in the human retina, and there are none at all in the central fovea, which is the place we're looking and the point of highest acuity. As a result the retinal image is represented by sparser samples in the SWS neural pathways than in the MWS and LWS pathways.

Legibility and the Blue Primary

Color usage guidelines often include a statement like, "Pure blue should not be used for fine detail or background". The problem that this common guideline addresses is illustrated in the two panels below. The black text on the pure blue background and pure blue text on the black background are barely legible at any size, especially on CRT displays and older LCDs. Legibility is particularly poor at the smallest font sizes.

text text text text

The usual explanations offered cite two problems with blue.

1) Blue has low luminance. The blue primary of white-aligned displays has only about 1/10 the luminance of the green primary due to the relatively strong coloring power of short wavelength light. Furthermore, the blue primary stimulates mostly the SWS cones, which are known to contribute little to the visual process that forms perceptual 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.

2) Visual resolution of fine detail is poor for blue. The visual mechanisms that are fed by the SWS cones have been found in psychophysical experiments to have poorer spatial and temporal resolution than those fed only by MWS and LWS cones. This poor resolution is what allows television signals to allocate less bandwidth to the yellow-blue signal component.

Problems with the SWS-cone system are not confined to the blue/black color combination of the above demonstration. Yellow (red and green primaries at their maxima) differs from white only in the absence of the blue primary, so they also make poor symbol/background combinations. Any symbol/background combination that differs only in the blue primary will differ mainly in the SWS-cone signals and will pose similar legibility problems.

The problem has been changed somewhat in recent LCD displays by a shift of the chromaticity of the blue primary slightly toward green. The hue of this newer blue primary has no visually obvious green component, and the shift increases stimulation of middle-wave-sensitive (MWS) cones enough to reduce the blue/black problems. Nevertheless, this mostly just moves the problem around. For most of the colors within the monitor gamut there are still possible background colors that differ only in the SWS-cone response.

The symbols in this figure differ from their backgrounds only in the blue primary:

text text text text

Blue can be used in most contexts if care is taken to achieve adequate luminance contrast. This can be done in a number of ways. Instead of blue on black or vice versa one can substitute white (or some other high luminance color) for the black. In the next figure the small blue text on the white background is nearly as legible as the black text:

text text text text

The next figure shows text in the full range of luminances of the blue primary on backgrounds that span the full range of the display:

Nine lines of blue text of different luminances are shown on a background gradient of grays. The gradient runs from white on the left edge to black on the right edge. None of the lines of text is very legible on the darkest third of the background. Of the legible lines, all but the brightest few are too dark to be clearly identified as blue.

Other ways to get sufficient luminance contrast include using a pale blue (essentially adding yellow light, increasing the luminance but decreasing the purity) on the black or outlining the text:

6 different text examples, 3 on a white background, 3 on a black background. Text is shown with no enhancement, with an outline, and with a background color.

Other SWS-Cone Phenomena

Spatial Localization. Symbols which have the same luminance as their background are perceptually less securely located in space and time than are symbols with higher luminance contrast. They tend to "float" visually or be "captured" by adjacent symbols with high luminance-contrast. The phenomenon seems to be especially problematic for symbol/background combinations that differ only in the blue channel.

Yellow and Black bars against a white background.

red and black bars on a grey background.

Comparison of the stability of the spatial localization of yellow vs. red. Both are roughly isoluminant with their backgrounds. The misalignment and gap between the chromatic bars and black bars is physically the same for the yellow and red but much less visually obvious for the yellow.