Color
Select contrasting colors for greatest legibility
Legibility is greatly affected by the perceived contrast between text and background. With low-contrast typography, reading is difficult since readers must work to distinguish letterforms. A document set with pink text on a red background would be tiring, if not impossible, to read.
Color perception is affected by many factors, including physiological factors such as aging and color-blindness and environment factors such as display settings and room lighting. When designing elements that require clarity and definition—such as text—choose colors for perceptibility and legibility above all other considerations to avoid using color combinations that make it difficult for users to distinguish foreground from background (Figure 11.1).
Figure 11.1: Legibility suffers when there is insufficient contrast between text and background. Some of the text on the YellowstonePark.com page is difficult to read because of low contrast and insufficient color differentiation, as shown here using the Colour Contrast Analyzer software. www.yellowstonepark.com, www.nils.org.au/ais
Color differentiation is most influenced by contrast in brightness, or light-dark contrast. Brightness is the amount of white that is present in a color. Pairing black with white provides the greatest brightness contrast since white has a 100% brightness value, whereas black has a brightness value of 0%. Legibility is greatest when the degree of brightness contrast between text and background is high (Figure 11.2).
Hue is also a factor in color differentiation. Greatest contrast is achieved by using complementary hues—that is, colors that are on opposing sides of the color circle—and by combining dark colors from the bottom half of the color circle with light colors from the upper half of the circle (Figure 11.2).
Figure 11.2: Text is most legible when foreground and background colors differ in brightness. As brightness contrast diminishes, so does legibility. Hue also affects color differentiation. Complementary colors produce more contrast than colors that are adjacent on the color wheel.
