Is your app colorblind-friendly?
Teodesk is a Project Management SaaS I co-founded almost 6 years ago, solving problems in the Telco Industry.
Creating a PM tool for this industry came with a bit of a specific challenge - almost 8% of our users are colorblind and many of them work in the field where they need information fast.
According to Wikipedia 1 in 12 men and 1 in 200 women are colorblind and the Telco industry is known for its lack of gender parity. For example, a 2020 GLF survey found that in 70% of telco organizations fewer than 30% of technical roles are held by women.
Almost every Field Worker using our app is male. And most of the Engineers and Project Managers also fall into this category.
So when deciding on a UX, this is something we definitely needed to take into account.
That’s why,
“Just make it red when it’s late”
Doesn’t work.
When it comes to visually distinguishing between different types of components the most obvious solution by non-colorblind people is always the color.
But actually there are better alternatives. Look at the following example. Components are tasks that can have different statuses.
The first column only differentiates components by the color.
The second introduces a word as an additional differentiator which enables colorblind people to use this app without additional help.
And the third one introduces an icon as well, therefore adding a visual indicator for differentiation.
But why add them both (the word and the icon)?
When designing complex apps you'll certainly have multiple views for the same component.
Some views are better suited for a word and others for an icon. Putting an icon in a table cell is as strange as putting a word inside a map pin.
But, adding both identifiers where you can is actually a good practice. This flattens the learning curve of connecting a certain name to a certain icon.
So don't hesitate to use them both. UX is about functionality and not aesthetics.
Do you think about colorblind when designing your apps? Are there any nifty tricks you use?
I'm happy this takes into consideration. It'd be interesting to do research and ask colorblind people how they consume information. Based on it, we can make their experience better.
Thanks for sharing!
I'm glad to see this being a priority. On numerous occasions, I've seen UIs, dashboards, and presentations that are not "color-blind" friendly. Accessible design should be much more a priority all around imo.
Colors should be used for a purpose; usually to break up different sections or categories. As a rule of thumb, I always try to use multiple factors to differentiate sections (e.g. color, icons, shape, etc.). That way, the experience is all around more friendly for a wider audience.
Agreed 100% 😄
Amazing! I have to admit that sometimes I struggle with this as a developer.
I'm not colour-blind myself, but I'm a big fan of less-is-more.
Adding both text, icons and colours is not a less-is-more approach. BUT, it this case it is highly needed to optimise the UX for 8%(!) of the users.
I wonder, maybe the best approach is to ask the user for colour-blindness while onboarding, and apply 2 different styles? So "Regular"-users have the simplified approach, and colour-blind users the enhanced color-text-icon approach.
Anyways thanks for the food-for-thought!
Yeah, for sure less-is-more approach is more visually pleasing.
For app mentioned above we have something we call Comfy View that removes all the clutter from our Kanban (icons & text) approach to be more visually pleasing to non-colorblind individuals. But analytics actually say that most use more complex view nevertheless.
So when it comes to color we do not have questionnaire for colorblindness but try to develop a single app that supports all.
For us it's important to differentiate between important and non-important colors.
For example when it comes to a table view we have a differentiator between cost and revenue colors for different modules. But they are not different for most colorblind people. Nevertheless when it comes to going under the planned revenue or over the planned cost it becomes the red that everyone can differentiate from both.
So only by looking at a color, colorblind person wouldn't be able to tell you what is the module, but for sure would be able to tell you what cell is important.
Thanks for the info! I didn't expect analytics say most people prefer to use the more complex view!
I'm definitely taking this in consideration with my next UI's. Thank you!
As somebody who's colorblind, I've learned to navigate a world not designed for people like me. Red when late is harder for someone like me to see but I've learned to live with it and simply pay closer attention to colors. It doesn't bother me if there's no colorblind mode.
That being said, I'd personally love a colorblind mode! It would definitely make me feel seen and would probably have a special place in my heart haha.
We've thought about this a bit as we build product tours at Driftly (feel free to AMA in livechat here if you're thinking about using it on Collabwriting!). Do we need a dark mode for our customers who's platforms have dark mode? Do we need a colorblind mode? Maybe future projects but we're thinking about them now.