LookFar Labs9 December 2021

How to Prioritize Color Accessibility in Product Design

While accessibility has become a hot topic in product design, we are still far 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 designing for color blindness, but we should.

The Numbers  

According to Colour Blind Awareness, 300 million people worldwide 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 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% 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 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 color-blind accessibility concerns. Second, we began researching how this might affect our product designs. 

Example of an application where color accessibility was considered in the design process.

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 distinguishing between specific 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 Blindness & 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. 

Images comparing normal vision to color deficient vision

  • 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 interfere with normal activities.
  • Protanomaly makes red look more green and less bright. This type of color vision deficiency is also mild and usually doesn’t interfere with normal activities.
  • Protanopia and deuteranopia can both make people unable to tell the difference between red and green and can be more disruptive. 

Credit www.designmantic.com

Color Blind Accessibility Considerations

Every challenge contains an opportunity. We now have 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 valuable and intuitive way for users with the most common color vision deficiency (red-green color blindness).

Designing for Color Blindness & Our Approach

First, we tested our designs. We tested alert notification colors using our existing color palettes for data visualization. Our goal was to determine whether the colors were distinct enough for all 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


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.

Color wheels for various types of color deficiencyCredit www.medicalnewstoday.com

Utilizing Red & Green

Red and green are universal colors used in digital platforms. They can highlight things going well and, alternatively, things not going well to signify critical messages to users. For our alerts, we knew that most users could 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 can perceive brightness, saturation, hue, and contrast differences. (We used the tool Coloring for Color Blindness by David Nichols DavidMathLogic.com. This helped us find the correct color contrast ratio to use.

Hex value bar chart for various forms of color deficiency

2. Varying Symbols

Using different symbols allows colorblind 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 correctly respond to the highlighted colors and 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 essential. As such, designing with the needs of color vision deficient people should be more common. When you prioritize their needs, it enables them to interact with digital experiences like people without color vision issues. To achieve this, research and testing are critical. Although these efforts can be time-consuming and expensive, your investment will be returned through increased customer loyalty. 

Ready to start a new product design with a company you can trust? Contact us today for a free estimate.

Written by

Zina Olado

Signal-Based Selling FTW with Creative Service Agencies Signal-Based Selling FTW with Creative Service Agencies Build vs. Buy: Third Party or Custom-Developed Software Build vs. Buy: Third Party or Custom-Developed Software