- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Usability Tips You Can Use: Designing Navigation with Lists
- Usability Tips You Can Use: Designing Forms for Keyboard Access
- Usability Tips You Can Use: Designing Flexible Layouts
- Usability Tips You Can Use: Designing Accessible Audio
- Designing Accessible Text—Part 1: Structure
- Designing Accessible Text—Part 2: Text Size
- Designing Accessible Text—Part 3: Color
- Designing Accessible Text—Part 4: Typeface
- Designing Usable Forms
- Designing Pages for Linear Access
- Designing Data Tables
- Working With Large Images
- Writing Link and Heading Text
- Writing Alternate Text for Images
- Cascading Style Sheets Part 1: Browser Styling
- Cascading Style Sheets Part 2: Shorthand
- Cascading Style Sheets Part 3: Media Style Sheets
- Cascading Style Sheets Part 4: Selective Printing
- Cascading Style Sheets Part 5: Styling for Print
- Cascading Style Sheets Part 6: Styling for Small-Screen Devices
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Designing Accessible Text—Part 3: Color
Last updated Oct 17, 2003.
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.
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).
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).
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: 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: 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: 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: ESPN navigation shown along with the Color Contrast Analyser's assessment of the foreground/background color combination
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.
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.
The following resources may be helpful in using the power of color to its best effect:
- For a good reference on general legibility, read Legibility of Print, by Miles Tinker.
- Aries Arditi at Lighthouse International provides two excellent references on color vision and designing for people with low vision: Effective Color Contrast and Making Text Legible.
- The Color Contrast Analyzer and Color Blindness Simulator are tools for validating color combinations.
- Criteria for optimal Web design, by Michael Bernard, provides helpful guidance on various aspects of design and usability, including color. While you're there, subscribe to Usability News for great, research-based articles on Web usability.
- For guidelines on designing color for universal access, along with other guidelines related to universal Web access, read my book Access by Design: A Guide to Universal Usability for Web Designers.