How to Prioritize Color Accessibility in Product Design

While accessibility has become a hot topic in product design, we are still leaps and bounds from achieving fully accessible experiences across all digital products. There are many types of accessibility- physical, speech, auditory, cognitive, and visual. Within visual accessibility, we don’t often talk about color vision deficiency, but we should.

The Numbers  

According to Colour Blind Awareness, 300 million people in the world have color vision deficiency. Statistically, about 8% of all men and about 0.5% of all females suffer from a color vision deficiency. This means 1 in every 12 men, and 1 in every 200 women are impacted. These numbers are significant enough to design with color vision deficiency in mind, especially when men are part of your target user group. 

One of our current clients, at LookFar Labs, is based in the construction industry. Currently, there are over 808,891 construction workers employed in the United States. 87.8% of them are men and 8.0% of all construction workers are women. Our client is one of these color blind men. His deficiency was revealed to the team early on in our engagement. We were so grateful to be awakened to this in our design approach.

This experience has changed our team’s design approach for all of our work moving forward. Here’s how our revelations transpired. First, since the majority of construction workers are men, we assumed that a large percentage of our users may have a color vision deficiency. Second, we began researching the impacts this might have on our product designs. 

What Is Color Vision Deficiency?

Color vision deficiency (also known as color blindness) represents a group of conditions that affect the perception of color. These people typically have trouble telling the difference between certain color categories, such as red-green or blue-yellow. There is no treatment or cure for this condition. Since very few people are actually color blind, color vision deficient is the more accurate term for people impacted by this deficiency. 

Types of Color Vision Deficiencies 

The most common type of color vision deficiency is Deuteranomaly. This condition makes it difficult for an individual to discern between red and green. People with red-green color deficiency can be affected by varying light conditions. 

• Deuteranomaly is the most common and mild type of red-green color vision deficiency. It makes green look more red, and typically it does not get in the way of normal activities.
• Protanomaly makes red look more green and less bright. This type of color vision deficiency is mild as well and usually doesn’t get in the way of normal activities.
• Protanopia and deuteranopia both can make people unable to tell the difference between red and green at all and can be more disruptive. 

Credit www.designmantic.com

Color Accessibility Opportunity

In every challenge exists an opportunity. We now had a client willing to invest in our Product Design service to build a product with a specialized emphasis on its design system. We needed to ensure that his application functioned in a useful and intuitive way for users with the most common color vision deficiency (red-green color blindness).

Our Design Approach

First, we tested our designs. Using our existing color palettes for data visualization, we tested alert notification colors. Our goal was to determine if the colors were distinct enough for all types of color vision experiences. Second, we needed to define the “safe” colors for red-green color blindness. Unfortunately, the options for “safe” colors were lacking and not visually complementary to our MVP’s current color scheme. 

Defining Safe Colors

Grayscale

During our testing, we found that selecting monochromatic grey would be safe in all color vision deficiency variances, as the tones were only one color.

Blue Spectrum

After analyzing more color patterns, we were able to identify that the blue spectrum was also a safe color to incorporate into the design system.

Credit www.medicalnewstoday.com

Utilizing Red & Green

Red and green are universal colors used in digital platforms. They can highlight things that are going well, and alternatively, things that are not going well to signify key messages to users. For our alerts, we knew that most users would be able to see red for the alarm messages and green for approvals. 

Color Accessibility Analysis 

Ultimately, we needed to decide whether or not to use these “safe” colors. We concluded that eight percent of potential users wasn’t large enough to offset common behaviors, with which over 90% of users would be familiar. Therefore, we opted not to use the “safe” colors. As a result, we needed to create a way for red and green to be seen.

How We Chose to Implement Safe Color Designs 

1. High Contrast

Colorblind people are able to perceive differences in brightness, saturation, hue, and contrast. (I used the tool Coloring for Color Blindness by David Nichols https://davidmathlogic.com/)

2. Varying Symbols

Using different symbols allows users to see the difference between system messages without having to identify them by color.

Our Color Accessibility Testing & Conclusions

Once our initial designs were complete, we tested them with users. We ran a test with three participants to see if users would respond to the highlighted colors correctly and to see if the icons were clear distinguishers. One of the participants had red-green color blindness. We confirmed that we could proceed with our designs. 

In closing, color accessibility is important. As such, designing with the needs of color vision deficient people in mind should be more common. When you prioritize their needs, it enables them to interact with digital experiences in the same way as people without any color vision issues. To achieve this, research and testing are key. Although these efforts can be time-consuming and expensive, your investment will be returned through increased customer loyalty. 

Ready to get started on a new product design with a company you know you can trust? Contact us today for a free estimate.