Color Combinations and Accessibility

Overview

For those of us with “normal” color vision the color-combinations of web pages can have a big impact on readability. This problem is even worse for those who have different types of color vision deficiencies. According to the section 508 web guidelines “Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.” This means that, for example, if links can be determined by their color, they should also be obvious because they are in a given location or they should be underlined or otherwise defined in a non-color way. This does not mean, however, that one should not use colors that are accessible to as wide an audience as possible. Color cues are powerful ways to signify information. We all know this based on the power of a color printer or color display to enhance our ability to make given information more or less salient. Therefore, the designer should still make an effort to utilize color as a method for conveying information for as wide an audience as possible.

The term “color-blind” is a misnomer in that most people we refer to as “color blind” can see color, they simply can not discriminate as many colors as those with “normal” color vision. Those who do not see any colors – see the world in “black and white” - are referred to as “Acrhomats” and this is very rare. The most common type of color blindness, on the other hand, is an inability to discriminate red and green colors. Color blindness is much more common with males than with females.

With respect to accessibility and web design, color becomes important when it coveys “important” information. Although it would be nice if a color blind persons could appreciate the subtle aesthetics of a page, the crucial issue is whether or not they can glean the important information/content from the page. “Important” information on a web page refers to things such as text; links; and navigation and interface elements such as search buttons.

Anatomy

Color blindness is normally due to a dysfunction in one of the photoreceptors, which is responsible for vision (i.e., cones). Most of us have three basic types, each responsive to a certain wave length – long, medium, or short. It’s helpful to think of these three wave lengths as corresponding to red, green, and blue respectively, though the correspondence is not exact and, in fact, most of the time when we “see” a color it is due to the combined responses from all three types of color receptors.

The most common types of color blindness are due to deficiencies in the long wave length (protanopia) or medium wave length (deuteranopia) cones. A person who has a deficiency in either of these types of receptors has trouble discriminating reds from greens. A much less common type of color blindness is tritanopia, which is a dysfunction in short wave length cones. Those with tritanopia cannot distinguish blues from greens.

Design

For design, this means that there are certain color combinations, which are better than others for enhancing a site’s accessibility. More specifically, Joe Clark, the author of Building Accessible Web Sites (Clark, 2002), provides the following recommendations of color combinations that ARE accessible:

One of the best ways to test the accessibility is to use this excellent “color filter” on your site, which will allow you to “see” your site as someone with a given color deficiency.

If you’re interested in learning more about color combinations and accessibility see the chapter on type and color, which comes from Joe Clark’s excellent book Building Accessible Web Sites.

References