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 that were critical to product logic and user interaction.

 

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.

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.

Share
Share the article:
Share this link