Designing for Colorblind Users: What We Learned from Testing Tag Colors

Do you know someone who is colorblind - or are you yourself? Color blindness is relatively common vision deficiency, so let's have a look, how we deal with this challenge in the software we are developing.

According to We see colors differently, 1 in 20 people has some form of color vision deficiency.

That's a number we don't want to ignore in our user interfaces. As part of our effort to make our UI more accessible, especially for people with visual impairments, we've been working on improving how we use color in our software.

As for color palettes designed for accessibility, we are using Wong, Ibm and Tol palettes.

Why This Matters for Our Tagging System

In our accounting tool, we use colored tags to help users visually organize data. However, we recently needed a broader range of tag colors. We wanted to make sure that even with a wider palette, the colors remain distinguishable and readable for everyone, including those with color vision deficiencies.

So we merged all mentioned palettes and began testing how users perceived them and if merging them will influence the distinguishing ability.

Bellow you can see our testing data. The research question was: "Do you indentify some of the tag colors to look as an one identical color?" At this early stage of the reserch we started with two users.

Our findings and insights

One of the first issues that came up was that our existing function to calculate contrast color based on brightness wasn't working well. Users mentioned following problems:

• User 1 could not read the tag hardware, meanwhile User 1 could read it, but they repoted it as least distinct,
• User 1 resported tags fixed-cost, services, year were hard to read due to the lack of contrast with the backgroud, stating that using white text color might help,
• User 2 repoted tags cashflow, periodical-cost, infrastructure are problematic to read, tags non-tax and electricity were still a bit problematic to read for them,
• Both User 1 and User 2 said, that distinguishing of the tag backgroud colors was easy.

Based on the garthered data, there's not much overlap within this A/B testing findings, regarding the readability. Interestingly, the text color seemed to be much more troublesome element, than the merged palettes. As users didn't report any problems distinguishing colors between each other, we can make an early conclusion, that mixing the colorblind palettes altogether is working approach.

What's Next

We'll keep experimenting and refining - this is only the beginning. As we further develop the tagging system, we'll be focusing not only on functionality but also on real-world usability for all users, regardless of how they see color.

Thank you for reading, see ya next time.

Resources:

1. We see colors differently
2. Colorblind Palette