Color choice can be the backbone of good design or it can be the soft and unstable foundation leading to bad design. In this post, we’re going to explore how the smart use of color might help us create better user experiences which are more inclusive for people who have color blindness.
Color blindness, also known as poor or deficient color vision, is the inability to differentiate between certain colors. They say color blindness affects about 4% of the population (roughly 8% of men and 0.5% of women), so it's an important consideration when designing interfaces for a broad range of users. However, to know the best solution we first have to understand the depth of the problem, like… what is colour blindness? How does it occur? What limitations does it create for those who have it? And how we might design interfaces, experiences or brand identities that produce a better and more consistent experience regardless of someone’s visual abilities? Let’s get to it and add some color!
Impact – how common is color blindness?
We already mentioned colour blindness affects 4% of the population, but it seems like those stats may be a specific subset of the population. Most sites report researchers have found that color blindness affects 1 in 12 men and 1 in 200 women; however, color blindness is more common in Caucasian men, and from one study it seems only 1.4–3.1% of non-Caucasian boys had the condition, which could challenge that "4% of people" benchmark [source]. Regardless of the exact values, color blindness affects at least 1 in 150 people.
Super Color Vision: Interestingly, studies have also found some women have the opposite of color blindness and instead have super color vision, which is related to how the X chromosome carries the genes for pigment interpretation in the eye. Women who have the appropriate genes in both of their X chromosomes can see a greater range of color – it is believed they can see an additional 99 million color tints than your average person (who can only see about 1 million tints) [source].
Types of color blindness
The part of the eye that captures and interprets light are cells called "cones," there are three different types of cone and they three different colours. When it comes to color blindness, people with typical full-color vision are said to have “trichromatic vision," or three-color vision. Those with imperfect color vision fall into a bucket of either “anomalous trichromatic vision” or "dichromatic vision." In people with the former condition, all three cones are still used to perceive light colors, but typically one cone is out of alignment, and that affects the perception of color for that individual. Dichromatic vision occurs when one of the cones is fully dysfunctional and doesn't register any color. The degree of this muted perception of color can range from almost normal to an almost totally absence vision of the faulty color [source], so the extent of color blindness falls on more of a spectrum and it’s rarely black and white (a bad pun)—it’s really not a case of “full-color vision” vs “color blindness.”
Color blindness can be further broken down into four types based on the defective cone(s), but we generally group the two most common together as “red-green color blindness.”
The four subgroups are:
- Red blind (Protanopia) – affects 1% of men; 0.02% of women
- Green blind (Deuteranopia), most common – affects 6% of men; 0.4% of women
- Blue blind (Tritanopia) – affects 0.008% of men and women
- Complete or "true" color blindness (Monochromacy) – which affects only 0.001% of the population
Simulation: Colors as seen by someone with color blindness
What causes colorblindness?
This all goes back to high school biology class; at the back of our eyeball, there are photoreceptor cells shaped like rods and cones. Rods help us see in low light and do not detect color—this is why we only see black and white in very low light. Like we mentioned earlier, cones detect color and they also require more light. Each of the three types of cones, detect a specific range of light (and color). Cones that detect short wavelengths help us see blue light; cones that detect medium wavelengths help us see green light; and cones that detect long wavelengths help us see red light. The brain does some interpretation to help us see colors that fall between these spectra, like for seeing the colors yellow, orange, and purple, but for all of these in-between colors, the red and/or green receptors play a role in seeing them.
A person who is red blind (Protanopic) has a malfunctioning set of cones that detect red light and therefore colors of red are muted for that person, and because purple and orange also have some red light, the experience of these colors are also affected. A person who is green blind, has issues with the cones that detect green light. And if all cones are non-functioning the person would see in monochromatic with limited color depth of all colors.
How color blindness can negatively impact experience
Imagine you have Protanopia (red blindness); you may not be completely blind to red light, but the color red wouldn't be as vibrant to you as it is to the general population. How might a muted traffic (or break) light affect your reaction time? Data suggests that in people with red-color blindness, the loss of red-light sensitivity can reduce the distance from which red signals are seen by up to 40% [source].
Break Light Visibility Example
If you’re interested, you can read more on color blindness and traffic lights here, but this is an interesting example of they way the color red is extensively used in our society, and where the consideration of the driver experience is important—for the safety of everyone. It doesn’t mean that we say, “people with color blindness shouldn’t drive” (that's ridiculous!); instead, we should look at the construction of break and stop lights and design them to be inclusive for people who have red-green blindness.
Simple design exploration: adjusting break & traffic light design for color blind vision
Below shows a simple exploration of how lights could be adjusted to include icon recognition, and integrate more white light to ensure visibility is maximized regardless of a person's ability to see color.
How colors related to red and green also present challenges in design
We covered above how the brain does interpretation to see colors that fall between red, green and blue, and how red-green blindness can affect the vibrancy of those colors too. As an example: the color orange, a popular brand color, is a combination of red and yellow. When you remove the red pigment (or wavelength), then the remaining color is less intense than how orange would normally appear. The same outcome applies to purple. Here's is an example of how color blindness affects other colors as well:
Comparing red-related colors
This is why colors like orange and purple often result in accessibility issues for people with color blindness; specifically when used for text and/or buttons, these colors will rarely meet WCAG compliance checks (unless the text is very large, very dark, or the text is black over that color).
Why does accessibility and color even matter?
Aside from potentially making elements on an application or website harder to see, in extreme cases it can make them nearly fully invisible. Take a look at the color combination examples below, and check out how the color blindness simulation shows how these colors can appear nearly the same to someone with color blindness.
Examples of contrast issues
Accounting for accessibility matters because it ensures a more consistent experience and avoids you making dire mistakes like completely making content invisible to a select audience.
How to design user experiences (UX) for color blindness
When it comes to designing software (or brand experiences), how can we account for color blindness?
First, knowledge is power. The more you understand the challenges and limitations of others, the more you can account for their experiences. That’s why we’ve created this article. Then, building upon that knowledge to understand context is important—for example, knowing some of the immediate limitations like: colors that cause problems or contrast ratios that just don’t work is another.
A simple option is check your work. Quality Assurance (QA) is common practice in software development—and it starts at the design phase. Make sure your work meets best practices and guidelines for accessibility early on in the design phase and address challenges or issues with your project stakeholders.
If you’re not colorblind, how can you design for someone who is colorblind?
It turns out there is an easy way for a designer with regular trichromatic vision to experience what color blindness might be like. Not only are there a multitude of tools that can help you experience color blindness through your work, but there are also basic tools that just give you pass or fail tests of colors.
// Methods for checking UX for accessibility
What colors are color blind safe? – UX tools for checking color and contrast for accessibility
Color Contrast Checker
The contrast checker is a super effective tool that allows you to easily check the baseline combination of colors. It doesn’t go into the details of colorblindness, but you may find that orange, red, and purples (all colors that have red pigment) often score low on accessibility—it’s because the tool is accounting for colorblindness. Check it out and test some colors for yourself. Do the button colors on your website meet web accessibility compliance?
Color Blindess Simulator (Coblis)
The color blindness simulator is a simple way to view the world through the eyes of someone who is colorblind. You can upload an image to the simulator and toggle the various types of colorblindness to see how it affects your view of that photo. It’s a handy tool for clients who may not have access to photoshop and/or design programs like Adobe’s XD.
Photoshop
Photoshop has a color blindness accessibility checker built into the program and you can check by clicking on “view” > “proof setup” and selecting the proof filter for either protanopia (red blind) or deuteranopia (green blind). Take a screenshot of your design, drop it into photoshop and run a quick check with the color proofing turned on. If you struggle to see details around buttons, links, or primary design elements...go back to the drawing board and adjust for a better UX.
UX Design Plugins for Adobe XD, Figma and Sketch
Each of the leading UX design platforms have plugins you can install to check color blindness and accessibility.
Download Stark Plugin for Adobe XD – check your contrast ratios
Download Color Blind Plugin for Figma
Download Stark Color Blindness Simulator Plugin for Sketch
Chrome Web Browser Color Blind Plugin
With user experience design (or corporate branding), it’s unlikely that the outcome of less ideal experiences will be life or death. However, being aware of and accounting for these challenges within your audience can at least allow you to maximize the chance all people are able to effectively use your product or connect with your brand.
We hope you've enjoyed this topic. If you want to continue your exploration into color blindness and UX, refer to the links below.
Continued reading
- Something About Yellow - a thoughtful and detailed dive into the value of using yellow as a design choice.
- Accessibility Basics: Designing for Visual
Impairment
Looking to redesign your website or app? We can help.
Start a design & UX blueprint with MQ
Contact us to book a design session
What is a UX Blueprint?
