Color Me Accessible - Seeing Red

Color blindness encompasses a large number of causes and conditions, and it's complicated and complex. Wait! Come back! I promise I won’t be talking about cones and rods...whew! When we talk about color blindness, we refer to the most common type, which is red-green color blindness.

Types of Red-Green Color Blindness

There are 4 types of red-green color blindness:

  • Deuteranomaly is the most common type of red-green color blindness. It makes the green look more red. This type is mild and doesn’t usually get in the way of normal activities.
  • Protanomaly makes red look more green and less bright. This type is mild and usually doesn’t get in the way of normal activities.
  • Protanopia and deuteranopia both make you unable to tell the difference between red and green at all. (National Institute of Health, National Eye Institute, 2019)
Chart depicting the difference in unaffected vision, the flowers are bright pink, Protanopia, the flowers are blue and Deuteropia, the flowers are white.
Courtesy of Iris Tech

Designing for Red-Green Color Blindness

WCAG Success Criteria 1.4.1 Use of Color (Level A) states, "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

So...how do you go about satisfying that criteria? The solutions are relatively easy:

Add an icon, a caption, or microcopy. The design element retains its intended function no matter what color the user sees.

A boxed outlined in blue with the words Button Sample in white at the top. Inside the box, there are several buttons: 1) is a large green button with an icon of a checkmark and the word Accept 2) is a gray button with the word Accept written on it in black with a button below that is a gray button with an icon of a green circle with a white checkmark 3) a gray button with the word Decline written on it in black with a button below it that is a gray button with an icon of a red circle with a white X.
Courtesy of Oracle

Add patterns or textures. This is especially important for graphs and charts that often use color to present different data sets. Using patterns, textures, and good contrasting colors significantly reduces the dependence on color to perceive and understand the information.

A bar chart depicting 4 data sets about phone use. The bar for Internet is styled in black horizontal lines. The bar for Phone Calls is styled with blue crisscross and the bar for Games is styled with green octagons.
Courtesy of tekhnologic

Offer an accessible color palette or theme. Give your users the choice of changing the default colors. For example, Slack has 2 accessible themes available to its users. These themes change all colors of the user interface.

Two dark colored boxes with rounded corners. The first box depicts the color combination used for Protanopia and Deuteranopia color blindness. White and gray text fields and dim green "user active" indicator icon and an olive green button. The second box depicts the color combination used for Tritanopia color blindness. White and gray text fields and a bright green "user is active" indicator icon and a red button.
Courtesy of UX Collective

Easy peasy...with just a few thoughtful design choices, you will create an interface that benefits not just users with red-green color blindness, but also:

  • Users with partial sight often experience limited color vision.
  • Some older users may not be able to see color well.
  • People using text-only, limited color, or monochrome displays may be unable to access color-dependent information.
  • Users who have problems distinguishing between colors can look or listen for text cues.
  • People using Braille displays or other tactile interfaces can detect text cues by touch. (W3C - SC 1.4.1 Use of Color)

Resources:

Maggie Vaughan, CPACC
~ friend of DubBot, A11Y practitioner in higher ed