New on UXmatters
  • Calculated Misery: The Dark Side of UX Strategy
  • Thinking About Designing with Data
  • Responsive Web Design for eCommerce Web Sites
  • Review of SessionCam: User Observation 2.0
  • Review: Online UX Courses
  • Strategy Versus Tactics
  • Applied UX Strategy, Part 2: The Product Designer
  • Information Architecture and Agility: A Work in Progress
  • Routines on Projects: Why They Deserve More Attention
  • Review: Responsive Web Design Features in Axure 7
  • UXnews
Sponsors of UXmatters
Do you create products or organize events for UX professionals or manage a UX team that’s hiring? Sponsor UXmatters and see your ad or logo here! Learn morespacer

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ensuring Accessibility for People With Color-Deficient Vision

By Pabini Gabriel-Petit

Published: February 5, 2007

“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.”

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.

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.”

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 spacer and blue spacer            
red spacer and violet spacer            
orange spacer and blue spacer            
orange spacer and violet spacer            
dark brown spacer and blue spacer            
dark brown spacer and violet spacer            
yellow spacer and blue spacer            
yellow spacer and violet spacer            
yellow spacer and dark gray spacer            
blue spacer and dark gray spacer            

Note—Throughout this article, I’ve used colors from the Web-safe palette in 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 spacer
violet spacer
navy blue spacer

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 spacer
dark blue-violet spacer
violet spacer
light cadmium yellow spacer

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 spacer
rust spacer
pale cadmium yellow spacer

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 spacer
magenta spacer
navy blue spacer

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 spacer
deep burgundy spacer
Ajanta gold spacer
light mustard spacer

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,

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.