Legibility

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

LEGIBILITY

On This Page: • Legibility and Color • Legibility and Other Graphic Dimensions

Legibility issues concern the users' ability to read and discriminate the shapes of the symbols in the graphic. In the graphics-design context, there are two main sources of guidance on legibility, applied vision research and evolved professional practice. This is one of the graphics topics where we can draw upon a certain amount of solid vision science.

Legibility and Color

With respect to the effect of color choices on legibility, luminance contrast is the main issue. The visual response that roughly corresponds to luminance contrast is the brightness difference between symbols and their backgrounds. A symbol with the same luminance as its background will usually be illegible. Legibility problems are mostly solved when you get adequate luminance contrast.
More about Designing with Luminance Contrast.
More about Luminance Contrast.

The full range of text luminances against all possible background luminances. The background is shaded from white on the left to black on the right. The top line of text is black and the bottom is white, with lines in seven shades of gray in between. RGB values for the text and background are shown on the right and bottom, respectively.

This figure spans all of the possible luminance relations between symbols and backgrounds. The white at the left edge of this background is the highest possible background luminance of any color and the black at the right edge is the lowest. No text of any color can have higher luminance than the top row nor lower than the bottom row. Scanning across each row, as the luminance of the text approaches that of the background it becomes illegible.

Text in several sizes and colors appear on a middle gray background. The black text and white text are easy to read, but the other colors are not, because they have been set to the same luminance as the gray background.

It's not just gray text on gray backgrounds that becomes illegible when luminance contrast is too small. The problem extends to colored text, colored backgrounds, colored symbols... any graphic element on any background.

Large hue differences between the text and background aren't enough to overcome insufficient luminance contrast. Here the text colors from above are placed on a vivid green background. (For demo purposes there is a slight luminance gradient from left to right in the background, to try to make the text and background the same luminance in spite of small differences between your display and mine.) There should be someplace along each line of text (except the black, of course) where the text is difficult to read.

Text in several colors appear on a green background with a small luminance gradient from left to right. Despite large hue differences from the background, the text is difficult to read at the point where it has the same luminance as the background.

Blue and yellow present special legibility problems due to the visual response to blue.

black text on blue	(black text on blue)
blue text on black	(blue text on black)
white text on yellow	(white text on yellow)
yellow text on white	(yellow text on white)

Similar problems occur with other symbol/background combinations that differ only in the blue channel:

magenta on red	(magenta on red)
red on magenta	(red on magenta)
cyan on green	(cyan on green )
green on cyan	(green on cyan)

More about Designing with Blue.

Legibility and Other Graphic Dimensions

Graphic dimensions other than color can also affect legibility and influence the appropriate color choices. The effects of symbol size are well known: Smaller symbols may need higher luminance contrasts to have the same legibility as larger symbols. Nearby graphic elements can also reduce legibility by masking and figural interference. Textures with high luminance-contrast can severely reduce legibility:

Black text appears on several black-and-white patterned (halftone) backgrounds. The text is hard to read due to the masking effect of the background on the text.

More about Masking by Patterns.

Three lines of black text appear on white backgrounds. The middle line is easy to read. The top line is hard to read due to the text overlapping a second, slightly displaced line of text. The bottom line is hard to read because the spacing between adjacent letters has been severely reduced.