Top

Ensuring Accessibility for People With Color-Deficient Vision

February 6, 2007

This article is Part IV of my series “Color Theory for Digital Displays.” It describes how you can use color in applications and on Web pages to ensure that they are accessible to people who have color-deficient vision.

If you do not consider the needs of people with color-deficient vision when choosing color schemes for applications and Web pages, those you create may be difficult to use or even indecipherable for about one in twelve users.

Champion Advertisement
Continue Reading…

About Color-Deficient Vision

Normal color vision is trichromatic—that is, capable of perceiving all three primary colors of light: red (#FF0000), green (#00FF00), and blue (#0000FF). However, approximately four percent of people of European descent either have color-deficient vision or are color-blind—specifically, about eight percent of men, but only 0.4 percent of women.

Color-deficient vision results from the malfunction or absence of certain classes of retinal cones—the photoreceptors that provide color vision and are sensitive primarily to either red, green, or blue light. With color-deficient vision, it is more difficult to discriminate all three dimensions of color—hue, value, and chroma. The severity of color-vision deficiencies ranges from a little difficulty in distinguishing similar hues to the inability to perceive any color at all. Color blindness is the complete inability to perceive one or more of the three primary colors of light. There are several different types of color-deficient vision, as follows:

  • anomalous trichromacy—Mildly deficient trichromatic vision in which a shift in the peak sensitivity of light-sensitive pigments in the retinal cones results in reduced sensitivity to red (#FF0000) or green (#00FF00). Anomalous trichromats have some difficulty in distinguishing similar hues in the red/orange/yellow/green region of the spectrum. There are two forms of anomalous trichromacy and both are inherited:
    • protanomaly—One percent of men have this form of anomalous trichromacy, commonly called red weakness. With protanomaly, a shift in the receptivity of red-sensitive cones toward the green part of the spectrum results in some degree of reduced sensitivity to red. Thus, all hues containing red appear to have reduced levels of chroma. The red content in magenta and violet hues appears so weak that it may be imperceptible, causing anomalous trichromats to perceive magenta and violet as hues of blue. Red, orange, yellow, and yellow-green hues appear shifted toward green.
    • deuteranomaly—This is by far the most common form of color-deficient vision. Five percent of men and 0.38 percent of women have this form of anomalous trichromacy, commonly called green weakness. Deuteranomaly causes about 62 percent of all color-deficient vision in men; 95 percent, in women. With deuteranomaly, a shift in the receptivity of green-sensitive cones toward the red part of the spectrum results in some degree of reduced sensitivity to green. Green, yellow-green, yellow, and orange hues appear shifted toward red, but none of these hues containing green appears to have reduced levels of chroma.
  • dichromacy—Seriously deficient color vision that is capable of perceiving only two of the three primary colors of light: either blue (#0000FF) and red (#FF0000) or blue (#0000FF) and green (#00FF00). Dichromacy is also inherited, and there are three forms:
    • protanopia—One percent of men and 0.02 percent of women have this form of dichromacy and are unable to distinguish between red and green. Thus, protanopia is commonly called red-green color blindness. While many hues are mixtures of red and green or red and blue, protanopes perceive all hues as mixtures of blue and green, because they lack red-sensitive cones. Thus, protanopes see all hues of red, orange, yellow, and green as hues of ochre or yellow and cannot distinguish among them, except by their differences in value.

    For protanopes, all hues containing red appear to have reduced levels of chroma and value, and hues that contain a lot of red appear much darker. Normally, sixty-four percent of all cones are red-sensitive cones, so because protanopes have reduced sensitivity to red light, they receive less light overall. Therefore, protanopes can read neither red text on a black or gray background nor black or gray text on a red background. The red content in magenta and violet hues appears so weak that it is imperceptible to protanopes. Thus, they perceive all hues of magenta, violet, and blue as hues of blue and cannot distinguish among them, except by their values. Protanopes see white as a mixture of blue and green and cannot distinguish white from light blue-green.

    • deuteranopia—One percent of men and 0.01 percent of women have this form of dichromacy and are unable to perceive the green part of the color spectrum. Deuteranopia is also commonly called red-green color blindness. While many hues are mixtures of red and green or blue and green, deuteranopes perceive all hues as mixtures of red and blue, because they lack green-sensitive cones. Normally, thirty-two percent of all cones are green-sensitive cones.

    The deuteranope’s visible spectrum and receptivity to light are less limited than those of either the protanope or tritanope, because green is at the center of the color spectrum, and the sensitivities of both other classes of cones overlap with and, to some degree, compensate for the missing green-sensitive cones. Deuteranopes see all hues of green, yellow, orange, and red as hues of ochre or yellow and cannot distinguish among them, except by their values. They see all the hues of magenta, violet, and blue as hues of blue and cannot distinguish among them, except by their values. Deuteranopes see white as a mixture of red and blue and cannot distinguish white from light blue-violet.

    • tritanopia—Among dichromats, loss of sensitivity to hue across the spectrum is most severe for tritanopes. Fortunately, this form of color blindness is rare. Only about 0.002 percent of men and 0.001 percent of women have this form of dichromacy. Because tritanopes are unable to distinguish between blue and yellow, tritanopia is commonly called blue-yellow color blindness. While many hues are mixtures of blue and red or blue and green, tritanopes perceive all colors as mixtures of red and green, because they lack blue-sensitive cones. Thus, the tritanope’s color discrimination is best in the red/orange/yellow/green region of the spectrum, where that of the protanope and deuteranope is worst. Normally, only about two percent of all cones are blue-sensitive cones.

    Tritanopes see all hues of yellow, orange, red, and magenta as hues of red and are unable to distinguish among them, except by their values. They see white and all hues of blue, green, and violet as hues of blue-green and cannot distinguish among them, except by their values.

    • monochromacy or achromatopsia—Monochromatic vision. These severe forms of color blindness are rare. Only about .005 percent of people—both men and women—have monochromacy and can see either no color at all or only one color. Most forms of monochromatic vision are inherited, but one form, cerebral achromatopsia, is acquired. Forms of monochromatic vision include:
      • typical or complete rod monochromacy—Total color blindness. Typical rod monochromats completely lack cone vision due to the absence or malfunction of retinal cones; rely on only rod photoreceptors for vision; are extremely hypersensitive to light; and have very poor visual acuity, making them unable to perceive detail, especially in bright light. Rods provide vision in the dark or in dim light and are sensitive to light; they perceive only differences in value and are incapable of distinguishing colors. Therefore, rod monochromats cannot perceive color and see only shades of gray, black, and white. Among congenital monochromats, the vision of complete rod monochromats is the most severely impaired.
      • atypical or incomplete monochromacy—Severe color blindness in which some classes of cones are absent or defective. Atypical monochromats have few functioning cones, so lack normal cone vision, but do have a very limited ability to perceive color. They are less sensitive to light and have better visual acuity than complete rod monochromats.
      • blue cone monochromacy—A type of atypical monochromacy. Blue cone monochromats lack both red-sensitive and green-sensitive cones; rely on only blue-sensitive cones and rods for vision; are hypersensitive to light; have fairly poor visual acuity, especially in bright light; and can distinguish only a small range of blue hues.
      • cerebral achromatopsia—Total color blindness, generally caused by trauma or disease, resulting in some disruption in the neural pathways between the eyes and the vision centers of the brain. People with cerebral achromatopsia cannot perceive color and see only shades of gray, black, and white.

    All people with color-deficient vision can perceive differences in value and most can see a fairly wide range of hues—though many different hues appear identical for color-blind people. All anomalous trichromats experience greater problems with color confusion among hues with mid-range or dark values.

    The hues that protanopes and deuteranopes see are actually quite similar, though there is a slightly green cast to the hues perceived by protanopes and a slightly orange cast to those perceived by deuteranopes. Neither can perceive green, orange, red, magenta, or violet. Protanopes and deuteranopes see hues that contain more red than blue as ochre or yellow; hues that contain more blue than red as blue; and hues that contain approximately equal amounts of green and blue as neutrals.

Dichromatic Color Schemes

People with the most common types of color-deficient vision can distinguish the hues in each of ten pairs of 36 possible pairs of basic named hues, though they confuse their actual hues. Table 1 shows these ten distinguishable pairs of hues, or dichromatic color schemes, which provide good hue contrast for all dichromats. However, the values of many of these pairs of hues are too similar to provide adequate figure-ground contrast for readability even by people with normal color vision.

Table 1—Dichromatic color schemes as perceived by dichromats
Dichromatic Color Schemes Colors Perceived by Dichromats
Normal Color Vision Protanopia Deuteranopia Tritanopia
red Red color swatch and blue Blue color swatch            
red Red color swatch and violet Violet color swatch            
orange Orange color swatch and blue Blue color swatch            
orange Orange color swatch and violet Violet color swatch            
dark brown Dark brown color swatch and blue Blue color swatch            
dark brown Dark brown color swatch and violet Violet color swatch            
yellow Yellow color swatch and blue Blue color swatch            
yellow Yellow color swatch and violet Violet color swatch            
yellow Yellow color swatch and dark gray Dark gray color swatch            
blue Blue color swatch and dark gray Dark gray color swatch            

Note—Throughout this article, I’ve used colors from the Web-safe palette the examples. While it’s no longer necessary to restrict one’s use of color on the Web, doing so simplifies the examples. In Table 1, the hues for normal color vision are Web-safe colors, but those that represent what dichromats see are not. The hexadecimal values for the hues that people with normal color vision perceive are: red (#FF0000), blue (#0000FF), violet (#9933FF), orange (#FF9900), dark brown (#663300), yellow (#FFFF00), and dark gray (#666666).

Table 2 shows pairs of hues, or dichromatic color schemes, that have sufficiently high value contrasts to ensure adequate figure-ground contrast for good readability.

Table 2—Dichromatic color schemes with high value contrast, as perceived by dichromats
High-Contrast Dichromatic Colors Colors Perceived by Dichromats
Normal Color Vision Protanopia Deuteranopia Tritanopia
burnt umber north-light blue T T T T T T
burnt umber pale violet T T T T T T
incarnadine midnight blue T T T T T T
incarnadine dark blue-violet T T T T T T
pale brown midnight blue T T T T T T
pale brown dark blue-violet T T T T T T
pale cadmium yellow midnight blue T T T T T T
lemon ice dark blue-violet T T T T T T
lemon ice charcoal gray T T T T T T
midnight blue silver T T T T T T

Note—In Table 2, the hues for normal color vision are Web-safe colors. However, the hues that represent what the different types of dichromats see are not Web-safe colors. The hexadecimal values for the colors that people with normal color vision perceive are: burnt umber (#330000), north-light blue (#CCCCFF), pale violet (#CC99FF), incarnadine (#FFCC99), midnight blue (#000033), dark blue-violet (#330099), pale brown (#CC9966), pale cadmium yellow (#FFFF99), lemon ice (#FFFFCC), charcoal gray (#333333), and silver (#CCCCCC).

Designing Web Pages for Accessibility to People With Color-Deficient Vision

To ensure that the content and functionality on Web pages are accessible to and usable by people with color-deficient vision, do the following:

  • Maximize contrasts in hue, value, and chroma.

Maximizing contrast in all three of these dimensions of color ensures the readability of text and the decipherability of images and other visual elements.

For numerous examples of hue, value, and chroma contrast, in “Color Theory for Digital Displays: A Quick Reference: Part I,” see the section Color Contrast; in “Color Theory for Digital Displays: A Quick Reference: Part II,” see the sections Contrast Effects, Color Dominance, and Color Balance, and in “Applying Color Theory to Digital Displays,” see Ensuring the Readability of Text Through Contrast.

  • Use dichromatic color schemes.

Using color schemes that are similar to the ten dichromatic color schemes shown in Table 2 for essential elements on Web pages and their backgrounds ensures adequate figure-to-ground contrast for readability by dichromats.

  • Use analogous color schemes with care.
carnation pink Pale pink color swatch
violet Violet color swatch
navy blue Navy blue color swatch

When using analogous hues for essential elements on Web pages, maximize their value contrasts. Many analogous hues have similar inherent values, so this generally requires limiting the number of analogous hues to three—as shown in the example, which combines the analogous hues carnation pink (#FF99CC), violet (#9933FF), and navy blue (#000066). Additional analogous hues are always useful for non-essential, purely decorative elements.

  • Limit color schemes to only three or four hues.
lemon ice Lemon ice color swatch
dark blue-violet Deep blue violet color swatch
violet Violet color swatch
light cadmium yellow Cadmium yellow color swatch

Limiting the number of hues makes it more likely that people with color-deficient vision will be able to distinguish among them. For example, a color scheme might comprise the colors lemon ice (#FFFFCC), dark blue-violet (#330099), violet (#9900FF), and light cadmium yellow (#FFFF33)—plus black and white or shades of gray.

  • Ensure that there is sufficient value contrast between all the hues in a color scheme.

It is particularly important that there be adequate value contrast between text or other content and their background colors. Value is always an important dimension of contrast in a color scheme, but for people with color-deficient vision, high levels of value contrast are essential.

For examples of value contrast, see Table 1 and Table 2 in this article; in “Color Theory for Digital Displays: A Quick Reference: Part I,” see the section Color Contrast; in “Color Theory for Digital Displays: A Quick Reference: Part II,” see the sections Value-Contrast Effects, Color Dominance, and Color Balance, and in “Applying Color Theory to Digital Displays,” see Ensuring the Readability of Text Through Contrast.

  • Never use hues that have similar values next to one another.

If hues that have similar values are adjacent to one another, the content on Web pages may be illegible or even imperceptible to people with color-deficient vision—even if adjacent hues and their chromas differ greatly from one another.

  • Combine highly contrasting values of either reds, oranges, and yellows or magentas, violets, and blues in a color scheme.
burnt umber Burnt umber color swatch
rust Rust color swatch
pale cadmium yellow Pale cadmium yellow color swatch

In a well-designed color scheme with high value contrasts, both protanopes and deuteranopes can perceive either of these sets of colors as a range of discrete values.

An example of such a color scheme combines burnt umber (#330000), which is a shade of red (#FF0000); rust (#CC3300), which is a tone of orange (#FF9900); and pale cadmium yellow (#FFFF99), which is a tint of yellow (#FFFF00).

pale violet Pale violet color swatch
magenta Magenta color swatch
navy blue Navy blue color swatch

Another color scheme with high value contrasts combines pale violet (#CC99FF), which is a tint of violet (#9933FF); magenta (#FF00FF); and navy blue (#000066), which is a shade of blue (#0000FF).

  • Avoid the use of yellow-greens and greens with color schemes comprising reds, oranges, and yellows.

For protanopes and deuteranopes, the values of these two different ranges of hues are indistinguishable from one another.

  • Avoid the use of blue-greens with color schemes of magentas, violets, and blues.

For protanopes and deuteranopes, the values of these two different ranges of hues are indistinguishable from one another.

  • Avoid combining light reds, magentas, violets, or blues with dark hues at the middle of the visible spectrum, such as greens, yellows, oranges, or cyans.

People with some types of color-deficient vision are less sensitive to the reds or blues at opposite ends of the spectrum than to the hues at the middle of the spectrum, causing light reds, magentas, violets, or blues to appear darker than they really are and reducing their value contrast with dark greens, yellows, oranges, or cyans. Instead, combine light hues from the middle of the spectrum with dark reds, magentas, violets, or blues.

Protanopes lack red-sensitive cones and, therefore, sensitivity to the violet/magenta/red/orange region of the spectrum, so these colors appear darker to protanopes. Tritanopes lack blue-sensitive cones and, therefore, sensitivity to the magenta/violet/blue region of the spectrum, so these colors appear darker to tritanopes.

For examples of how protanopes and tritanopes see such color combinations, see Table 2.

  • Use high-chroma hues to ensure that anomalous trichromats can distinguish colors.

Anomalous trichromats have difficulty perceiving low-chroma hues and hues at the extremes of the value scale—that is, very light and very dark hues.

  • Present textual content in black on a white background or white on a black background.

Using such high value contrasts ensures the readability of text for everyone.

  • Ensure that all elements that are essential to the use of an application or Web page are visually distinguishable and readable, by either
    • rendering those elements in colors that have sufficient hue, value, and chroma contrast
    • providing redundant textual information for visual elements that may not be decipherable by users with color-deficient vision
  • Always underline links within content.

Optionally, you can also provide some other visual cue to indicate a link—for example, an arrow image.

  • Specify that the shape of the pointer should change to a pointing hand whenever a user points to a link or a hot spot in an image map.
  • Always use highly divergent hues for links and visited links.
blue Blue color swatch
deep burgundy Wine color swatch
Ajanta gold Ajanta gold color swatch
light mustard Light mustard color swatch

Protanopes and deuteranopes should perceive one of the hues as blue, the other as yellow, ochre, or a neutral.

For example, blue (#0000FF) links and visited links in either deep burgundy (#660033), which appears neutral; Ajanta gold (#CC6600), which appears ochre; or light mustard (#FFCC00), which appears yellow. Alternatively, you can use the latter two colors for links to which a user is currently pointing and active links.

  • Be particularly careful in choosing color schemes for navigation bars and menus.

Though links set off in navigation bars or menus are easier for users to identify than links within content, there must be sufficient contrast between links and their background colors to ensure readability. On navigation bars, menus, and other control bars, choose hues for labels and links that have high value contrasts with their backgrounds. Otherwise, it will be difficult for users with color-deficient vision to navigate a Web site or complete their tasks.

For examples of colors that protanopes, deuteranopes, and tritanopes perceive as having high value contrasts, see Table 2.

  • Use contrasting colors for hot spots in image maps.

Using high-contrast hues and values for the various hot spots in an image map ensures that users with color-deficient vision can visually distinguish them. Also, provide redundant textual links.

  • Use contrasting colors for rollover buttons.

When creating rollover buttons, be sure to maximize hue, value, and chroma contrast between the colors that represent the default and mouse-over button states.

  • Always specify colors for both text and backgrounds.

If you specify colors for text and link states, you must also specify their background colors and vice versa. Otherwise, the combination of the colors that you specify and a user’s browser defaults may result in unattractive or even unreadable Web pages.

  • Always specify background colors when using background images.

To ensure that information in the foreground is readable even if background images do not load, specify background colors in addition to background images on Web pages.

  • Communicate all information primarily through some means other than color.

You can use text, images, shapes, or patterns in addition to color. Color should never be the sole or primary means of communicating information, but only a secondary or redundant means of communication. Users should be able to interpret all information correctly without relying on any information that you convey using color. For example, use color-coded asterisks to indicate required values on a form page, not color-coded field labels.

  • Create achromatic wireframes to define the overall layout and structure of Web pages.

When designing Web pages, first create achromatic wireframes that establish their overall layout and structure. Once you have optimized all other aspects of page design and provided all necessary information without resorting to the use of color, you can add color visual cues. Doing so ensures that all color-coding provides redundant information, so Web pages will be usable by people with color-deficient vision.

  • Ensure that color is not the only visual cue indicating errors on a form page.

When using red (#FF0000) or another intense, warm hue to highlight the labels of any fields on a form page whose values are in error, be sure to provide either an error message near the top of the page that indicates a user’s specific errors or a graphic indicator beside each field that is in error. Doing so ensures that users with color-deficient vision can identify errors.

  • Always use other visual cues in addition to color to provide emphasis.

Provide emphasis using other visual cues along with color—such as bold or italic text; icons, symbols, glyphs, bullets, or borders; dominant size; or the prominent placement of elements in the upper-left corner, center, or lower-right corner of a Web page or other visual area.

  • Always provide ToolTips for icons and ALT text for images.

In addition to providing ToolTips for icons and ALT text for images, provide brief descriptions of images and other visual Web-page elements for display on the status bar when users point to them.

  • Always use simulated image maps rather than true image maps.

In a simulated image map, you can provide a ToolTip and ALT text for each slice of the multipart image—that is, for each link—rather than just for an entire image map.

  • Implement Web pages using CSS (Cascading Style Sheets), which supports accessibility for users with color-deficient vision in two ways:
    • CSS1 supports user style sheets that let users with color-deficient vision override colors that you specify, replacing them with colors of their own choosing.
    • CSS2 lets you specify color on Web pages using system colors instead of RGB values. (It is important to be consistent in your use of one method of color specification or the other.) Users with color-deficient vision typically change the color settings on their computers to accommodate their color deficiencies. Web browsers can render Web pages, on which you’ve used system-color keywords to specify colors, using an individual user’s system-wide color settings. 

Read more:

Bibliography

Arditi, Aries. “Effective Color Contrast: Designing for People with Partial Sight and Color Deficiencies.” Lighthouse International. Retrieved July 8, 2003.

Douma, Michael. “Causes of Color.” Retrieved July 6, 2003.

Futterman, Frances. “What Is Achromatopsia? The Achromatopsia Network. Updated June 20, 2003; retrieved July 5, 2003.

Galitz, Wibert O. User-Interface Screen Design. Boston: QED Publishing Group, 1993.

Henderson, Cal. “Color Vision.” Retrieved July 3, 2003.

Hess, Robert. “Can Color-Blind Users See Your Site?” MSDN (Microsoft Developer Network). Retrieved July 8, 2003 from http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess10092000.asp. No longer available.

Lie, Hakon Wium, and Bert Bos. Cascading Style Sheets: Designing for the Web. London: Addison-Wesley, 1999.

Mayhew, Deborah J. Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice Hall, 1992.

Rigden, Christine. “Safe Web Colours for Colour-Deficient Vision.” BTexact Technologies, 1997. Retrieved July 3, 2003.

— “‘The Eye of the Beholder’—Designing for Colour-Blind Users.” PDF British Telecommunications Engineering, Vol. 17, January, 1999. Retrieved February 5, 2007.

Vision Channel. “Color Vision Deficiency.” Retrieved July 5, 2003.

Wolfmaier, Thomas G. “Designing for the Color-Challenged: A Challenge.” ITG (Internet Technical Group), Internetworking, March, 1999: 2.1 Updated March 6, 1999; retrieved July 8, 2003.

Principal Consultant at Strategic UX

Founder, Publisher, and Editor in Chief of UXmatters

Silicon Valley, California, USA

Pabini Gabriel-PetitWith more than 20 years working in User Experience at companies such as Google, Cisco, WebEx, Apple, and many startups, Pabini now provides UX strategy and design consulting services through her Silicon Valley company, Strategic UX. Her past UX leadership roles include Head of UX for Sales & Marketing IT at Intel, Senior Director of UX and Design at Apttus, Principal UX Architect at BMC Software, VP of User Experience at scanR, and Manager of User Experience at WebEx. Pabini has led UX strategy, design, and user research for Web, mobile, and desktop applications for consumers, small businesses, and enterprises, in diverse product domains. Working collaboratively with business executives, multidisciplinary product teams, and UX teams, she has envisioned and realized holistic UX design solutions for innovative, award-winning products that delighted users, achieved success in the marketplace, and delivered business value. As a UX leader, she has facilitated conceptual modeling and ideation sessions; written user stories; prioritized product and usability requirements; established corporate design frameworks, standards, and guidelines; and integrated lean UX activities into agile development processes. Pabini is a strategic thinker, and the diversity of her experience enables her to synthesize innovative solutions for challenging strategy and design problems. She is passionate about creating great user experiences that meet users’ needs and get business results. A thought leader in the UX community, Pabini was a Founding Director of the Interaction Design Association (IxDA).  Read More

Other Columns by Pabini Gabriel-Petit

Other Articles on Visual Interface Design

New on UXmatters