How to design for people with color vision deficiencies

The recent project Craft Innovations has been working on made us look much broader at the accessibility aspect of the design process. The project specifics required map overlay color coding, so we dug deep into the color perception topic.

The problem is that millions of people worldwide have different types of color vision deficiency. Lots of color-impaired people cannot tell that the power connector on a MacBook changes color. And because of this peculiarity, they can’t perceive interfaces as they should be perceived.

In this article, we’ll tell you why it’s crucial to take this into account and which tools can help you easily make your interfaces accessible to everyone.

How we found out about the problem

We were building a Web 3.0 platform for a virtual land sale. One of the main interactive parts of the platform was a map divided into hexagons of a certain size (like beehives) that users could buy.

Those hexagons had different statuses: at the auction, upcoming, bought, or not available for purchase yet. Customers could browse through the map, see the status and price of a particular piece of land and purchase it.

The map layout catalog

As you might know, users don’t read, they scan. They give us just a couple of seconds of attention, so we needed to make the map easily understandable almost from a glance.

When the hi-fi prototype was ready, before jumping into UI, we ran usability testing to see how users interact with the platform and uncover blockers or blind spots. We’ve run testing with 8 participants, and interestingly enough, one of the participants was color-impaired.

Accidentally, the user mentioned it during the interview, which made us focus on this aspect.

If 1 out of 8 randomly picked users was color-impaired, how common could it be for our audience in general?

To find that out, we’ve run a round of in-depth interviews with color-impaired people to hear about their everyday life experiences, along with digital experience in particular. We also researched forums to see what bothers those people and what challenges they face.

Our insights after interviewing

We can highlight two types of personas after our user interviews and questionnaires regarding color vision perception.

One user persona has a low level of color vision impairment; those people usually don’t know they see colors differently unless they pass some medical tests – like for drivers or military service. They typically don’t feel any peculiarities in a day to day life apart from funny situations like the examples below.

In contrast to those insights, we found other aspects from people with significant color vision deficiency and on forums where people shared their experiences about notable discomfort or even inability to do some tasks due to their color perception impairment.

I’m used to relying not only on color. I always try to find other elements that could help me distinguish between colored elements – labels, texture, icons

There are an estimated 300 million people in the world with color vision deficiency.

1 in 12 men is color-impaired (8%).

1 in 200 women is color-impaired (0.5%).

That’s really a huge amount of people, and their needs should not be unnoticed. Not all of them are completely color-blind – there are different types of color vision deficiency: achromatopsia, tritanomaly, protanopia, protanomaly, deuteranopia, etc.

Colour perception aspect for digital interfaces

Let’s think – what types of digital interfaces rely heavily on color?

How about dashboards, task management tools, or e-commerce? How often do those types of products use different color coding in their interfaces? A lot. It is essential for them to use color coding and teach users throughout the journey.

Subway stations scheme? Different line – different color. What alternative could be used to differentiate one subway line from another?

Types of interfaces
1/ 4
1/ 4
E-commerce (photo from Amazon.com)
2/ 4
Graph charts (photo from the internet)
3/ 4
Task manager (photo from the internet)
4/ 4
Tokyo metro lines (source - personal.sron.nl)

How some of these types of interfaces might look like for color-impaired people

How we solved the problem

There are several plugins in Figma that can help you design accessible digital interfaces. We chose a specific plugin for our challenge that generates how the interface would look for people with 8 different color perceptions. It’s called Color Blind.

You just need to choose a frame you work with, click the button Create views, and you’ll see 8 looks of your interface.

This is how our first color pallet choice looked like for people with deuteranopia vision perception (red-green color blindness).

Deuteranopia is the most common color vision impairment among all color vision deficiencies. 6% of the male population, out of 8% with color vision deficiency, has deuteranopia.

And this is the final color palette choice based on the iterative design approach using the Color Blind plugin.

A little tip: you can use this website with accessible and matching together color palettes.

Although, working with different color perceptions is not always that unequivocal. We’ve faced the challenge – the color pallet could work for one vision perception but not work for the other. For example, achromatopsia is rare, but still, there are people with this type of color vision perception.

The solution was to use other contrast instruments – like borders and line thickness, to simplify the scanning process.

The map overlay is not the only aspect of our interface we need to pay attention to. Color contrast in all UX components needs to be checked and adjusted to standards.

To ensure our designs are easy to read, we use one more plugin – A11 Color contrast checker – and check if our text size and contrast meet the standards.

This aspect is very important for screen readers, and it also can be used by people with some vision deficiencies.

Giving users enough flexibility is also an aspect we took care of. We offered options to select a hexagon on the map or to look at the cards.

Dashboard Card view

I’d like to highlight that statistics show that the accessibility aspect is usually underestimated both in the aspect of harmfulness to user experience and the business outcome.

Making sure your design interface is accessible, as part of your design process, will benefit more users and, as a result, reward your company with an excellent reputation and your clients with new business leads.

Recommendations

Avoid using color as the only means of conveying information.

Follow these recommendations if you want to design an accessible interface for color-impaired people:

01. Make sure you’ve added text labels to indicate colors
For example, if you are using red and green to show different states, also add text labels or other visual cues to make it clear.

02. Use icons, patterns, and borders to simplify the perception
This great presentation will give you a couple of excellent examples of how to use patterns.

03. Create color-blind friendly pallets
You can check this website as a starting ground when working on your color pallet and test with plugins or users when it’s done.

04. Make sure you’ve checked an interface with the plugin
We used this Color blind plugin in Figma, which allows users to generate 8 different color perception deficiencies.

05. Contrast check for all UX elements in the interface
A11 Color contrast checker plugin is an excellent tool to make sure your interface can be used, for example, with a screen reader.

06. Pay attention to these aspects no later than hi-fi prototyping
It will save you much time if you identify critical moments before the UI stage and, moreover, development

07. Do user testing
The best way is to ask a real person if the interface is usable. But remember that the most irritative question you can ask is, “What color do you see here?”

Better will focus on “Is this interface easy to use for you?” “Is it easy to scan and navigate through the interface?”

Overall, the key is to ensure that your design is not dependent on color alone and that you provide multiple visual cues to help color-blind users understand the information you are presenting.

Please feel free to contact us if you need a design review or usability testing of your interface.

This article reveals the essence of cognitive distortions and the importance of critical thinking when working on product design, value propositions, customer experience changes, and other areas related to product or service design and development. 

Cognitive biases (distortions) are changes and deviations in human perception, behavior, and thinking caused by subjective beliefs, stereotypes, social, informational, emotional, environmental factors, and the peculiarities of the structure of the human brain. 

If you know these distortions, you can reduce their impact on work or use them for business purposes to increase profit. 

Types of cognitive biases

1. Group Thinking – making rational decisions based on a common group opinion to avoid conflict. It occurs in teams working together for a long time, with pronounced informal leaders, and in the culture, where is a practice of shifting responsibility. 

It leads to narrowing the number of options to choose “safe” strategies, reducing the probability of creating breakthrough products and lacking a critical view of the problem.

2. The Halo effect – the transfer of certain qualities (good or bad) of a person to other aspects of life, interactions, etc. This distortion can lead to a biased attitude toward information or decisions from a particular person, based on exaggerating or undervaluing them based on characteristics you have previously assigned to that person (wise, expert, buffoon, etc.).

The critical question is whether the person has the objective experience, decision-making competencies, hypothesis making, and evaluation.

3. The Dunning-Kruger Effect – the less we know, the more confident we feel about solving the problem. The project framework is often expressed by underestimating the task complexity, the timing of implementation, and the resources required.

It can be compensated by the involvement of experts and the complex evaluation of risks at each stage of project implementation.

4. Confirmation Bias – a tendency to see, remember, and interpret external factors as confirming your opinion/decision. It leads to underestimation of project risks, and overconfidence, as a consequence of ignoring signals in the early stages that the decision is wrong. It is leveled out by qualitative research and tests at each critical point of the project.

5. Belief Bias – is similar to Confirmation Bias, the effect of accepting and giving more weight and credibility to arguments that confirm your personal internal beliefs. The consequences and countermeasures are identical to the previous effect. You can also add the involvement of experts and the creation of a qualitative criteria matrix for decision-making.

You can see the difference between Confirmation and Belief Bias as follows:

  • I have an idea to start an electric scooter rental startup. Whenever I see someone on an electric scooter, I am convinced that this is the right decision because of Confirmation Bias.
  • Two friends, Max and Alex, have opposing views on my idea, each with their own arguments. I believe Max more because he has an electric scooter.

6. Status quo Bias – is a preference for maintaining the status quo as the most advantageous. Changes are perceived as a loss. It is characteristic of constant processes, approaches to work, and products in companies. It affects the ability and speed of the team to adapt to market opportunities. The effect is counterbalanced by launching pilot projects, an iterative approach, and hypothesis testing.

7. Sunk-Cost Effect – overestimating the costs already incurred on new opportunities. “We’ve already had enough of this software; let’s not invest again.” At the decision point, we ignore the new features and try to “protect” the decisions made in the past.

This effect influences the ability to quickly relaunch products or discard past choices to obtain new opportunities. It is counterbalanced by pilot projects, tests, and financial model calculations.

8. Framing Effect – we tend to have different perceptions and make different appraisals of the same information, depending on whom and under what conditions it was obtained. In product development, the presentation of information can strongly influence the perception of research results, the selection and prioritization of concepts, and future product features.

It is possible to fight against this warning using maximum rationalization of information presentation and differentiation of quantitative and qualitative influence factors.

9. Co-creation effect – we attach more value to the idea, solution, or product to the creation of which we belong. On the one hand, this effect may reduce the probability of an objective assessment of various product concepts by the “stakeholders.” If they are a participant in the process, on the other hand, it increases the probability of adopting and maintaining the innovation within the company (group). The creation of a matrix with selection criteria reduces the risk of bias.

10. The Survivorship bias – we try to focus on successful examples, ignoring the analysis of cases that were not successful. For instance, we will create a new social network like FB, Linkedin, and TikTok! They have succeeded. We are not analyzing the experience of thousands of other startups that have gone bankrupt in this segment. This bias leads to ignoring or preliminary assessment of the causal factors and erroneous decisions.

11. The Blind-spot Bias effect – we are confident that we have no bias and that our decisions are correct and unbiased. 

Craft Innovations provides services to companies and product teams to facilitate product innovation development. We will be happy to help you validate and implement your hypotheses. Contact us via email at bizdev@craftinnovations.global