Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Accessible Text—Part 3: Color

Last updated Oct 17, 2003.

If you’re looking for more up-to-date information on this topic, please visit our Web Design article, podcast, and store pages.

By Sarah Horton

Color is a powerful design tool, and one of the easiest ways to jazz up a Web site. Color adds visual interest, draws the eye, and communicates information to the user. On the Web, color is free, with thousands of colors available at the flick of a hex code. So color is great! But like all good things, color must be applied with caution. Designers often over- or misapply color to the point of reducing the usability of their designs.

Color can undermine the purpose of text. The wrong combination of foreground and background colors can render a text block difficult or impossible to read. Pink text on a red background is one of my personal favorites! And yes, with legibility there is a right and wrong, with contrasting colors resulting in easier and faster reading. High contrast also helps make color accessible to users with color deficiencies, and users accessing pages in low-contrast viewing conditions.

This article addresses concerns regarding color and text, with guidance on making good choices about color, and creating designs that work both without color and with user-defined colors.

Contrast

Legibility refers to the ability to distinguish and identify characters and word shapes. Reading is directly affected by legibility. When text is legible, we read more quickly and accurately; when legibility is compromised, we read more slowly and are prone to error.

One of the primary factors affecting legibility is color contrast—the difference between the text color and the background color. Contrast improves legibility—the greater the contrast, the clearer the characters and shapes, the more readable the text. In designing for legibility, our task is to determine which level of contrast is sufficient for most users in most viewing conditions. We need to consider users with normal color vision as well as users with vision disorders that affect color perception. We also need to account for different viewing conditions. Text that is perfectly readable on a display may be indecipherable when viewed on a projector or laptop. Users may not be aware of display adjustment options and wind up using low brightness settings.

Fortunately, contrast is a bit more science than art, and we have guidelines to follow in choosing colors that produce legible text. Also, we have tools for evaluating the accessibility of our color choices.

First, let's talk about the elements of color that most directly influence contrast—hue and lightness contrast.

Hue is... well... the color of the color—red, orange, and green are hues (see Figure 1).

Hue spectrum

Figure 1: Hue spectrum

Hue comes into play when considering users with color deficits, with red and green being the most problematic colors. Lightness is the amount of white and black in the color—light blue and pink are light colors, and navy and maroon are dark colors (see Figure 2).

Lightness Spectrum

Figure 2: Lightness spectrum

While hue influences color perception, lightness has the greatest affect on a user's perception of contrast. The highest contrast is achieved using white (100% lightness) and black (0% lightness).

Many designs make use of the same hue with different brightness values for text-background combinations—for example, text blocks set with dark brown text on a beige background, navigation tabs set with light blue text on a dark blue background (see Example 1 and Figure 3).

Figure 3

Figure 3: Text and background of the same hue with insufficient lightness contrast

This approach is reassuring because it eliminates the risk of using colors that don't "match." For this approach to be effective, however, the lightness contrast between colors must be sufficient for both people with normal color vision and those with color deficiencies. Maximizing the lightness contrast between colors will make the text more generally readable (see Example 2 and Figure 4).

Figure 4: Text and background of the same hue with good lightness contrast

Background patterns can also degrade legibility. Patterns are often composed of multiple colors, making it nearly impossible to ensure sufficient lightness contrast between text and background. Also, patterns tend to cause interference, adding noise to a design where text and pattern collide (see Example 3 and Figure 5).

Figure 5

Figure 5: Text set against a patterned background

Background patterns can be used without compromising legibility—but it ain't easy! In general, it's best to avoid combining background patterns with text.

Software can help confirm whether the colors we choose are accessible for most users. Vischeck is a color blindness simulator that converts colors on Web pages and in images to those viewed by users with color deficiencies. Figure 6 shows a portion of the navigation bar from the ESPN site. The first screenshot shows the colors as viewed by users with normal vision. The second screenshot shows the colors as viewed by users with red/green color blindness.

Figure 6

Figure 6: EPSN navigation shown using the Vischeck color blindness simulator

Another useful tool is the Color Contrast Analyser. In addition to simulating color deficiencies, the software provides feedback on the effectiveness of foreground/background color combinations. Figure 7 shows the tool in action on the ESPN site. The results show that the contrast in color and brightness between the foreground color and background color is inadequate, both for users with normal color vision and users with three different types of color blindness.

Figure 7

Figure 7: ESPN navigation shown along with the Color Contrast Analyser's assessment of the foreground/background color combination

Reinforcement

Color can be a powerful tool for conveying information. Traffic lights use colors to communicate information and control the flow of traffic—red for stop, green for go, yellow for... well... yellow is open for interpretation. But traffic lights use more than color to communicate—location matters. The red light is at the top of the streetlight, and drivers know that when the top-most light is lighted they need to stop.

When using colored text to convey information, we need to employ the same type of reinforcement. Simply using red to indicate required form fields or alert text is not accessible to nonvisual users and users who cannot differentiate colors. Instead, reinforce color with context—mark required fields with red text and an asterisk; highlight alert text with the word "Alert!" followed by the red alert text.

Customization

No one color combination will work for all users in all settings. Black text on a white background may be uncomfortable for users who are sensitive to glare. Users with low vision may prefer reverse contrast, with light text on a dark background. The best way to color text to meet the needs of all users is to construct pages such that users who need a specialized view can apply their own custom colors. The best way to support customization is to specify text and background colors using CSS.

Most browsers allow custom style sheets, allowing users who require a certain view—say, a high-contrast view with yellow or white text against a black background—to apply those colors to all Web pages. However, custom style sheets only work on colors that are defined using styles. Colors set in images or in the HTML code of the page are not affected by custom styling. For example, Figure 8 shows a page from CNN in normal view and using a custom, high-contrast style sheet. The navigation and article text displays using the user-specified colors, whereas the logo and headline text, which are graphic text, remain unchanged.

Figure 8

Resources

The following resources may be helpful in using the power of color to its best effect: