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