Every time someone finds out I’m color blind, I’m always hit with the same question: “So, what color is this?” 95% of the time I’ll answer correctly, which is always followed by, “Wait, so if you can tell this is {insert color}, then how are you color blind? What do you see?”. This is where the joy of explaining how color blindness works, and how it affects me comes into play.
As designers, we constantly worry about legibility, how engaging content is, whether hit targets are big enough, or if a user can navigate through a workflow. But we often forget about the one in ten people that are color blind. Too many times have I downloaded an app or game only to realize that using it was a huge pain. I’m often unable to distinguish one object from another or determine how something is labeled.
If 1 out of every 10 users finds your app to be difficult or even impossible to use, your ratings and reviews will drop drastically. So, how do we test for this? How do we fix any issues? And how can we prevent issues from popping up to begin with?
Where We ‘See’ Problems
Being color blind does not mean I cannot see any colors. My life does not lack hues; looking through my eyes is not like watching a Hitchcock film.
I don’t miss out on any colors — I see them all. I just have trouble being able to label them or tell them apart. When the leaves change color in the fall, I don’t always get to see the reds and oranges, and yellows. I may just see orange, or sometimes, I hardly notice the change and leaves go straight from green to brown. That being said, when designing apps, we should not look at individual colors and ask if they are ‘visible’, but rather look at groupings of colors, and see if they are distinguishable. Even then, we may require more visual aids to make sure that users will not mistake one color for another.
Successful Apps
Some apps and programs have done a great job of catering towards those who suffer from color blindness. Trello, a web-based application that allows users to organize tasks, does a great job of allowing a user to activate a color-blind mode. This small function allows a user, like myself, to be able to quickly distinguish between labels.
Trello’s solution for allowing color blind users to distinguish labels
Another app, Two Dots, a game focused around making connections of dots of the same color also has a color-blind mode. When I first started playing the game, I was extremely slow and had a hard time beating any level in the allotted amount of moves. Because I couldn’t distinguish the different colored dots easily, I had trouble creating combos. However, after discovering their color-blind mode, which adds an extra layer of classification on the dots by using symbols, the game became a lot more usable. Instead of having to rely on strictly color, I could play the game trying to connect symbols.
Two Dots’ colorblind mode
Preventing the Mistakes
So, you’ve made your designs, chosen layouts, icons, typefaces, everything. You just need to make sure your color choices work for those who are color blind. But, how do you do this other than the obvious ‘ask your color blind friend, co-worker, fiance, nephew, etc’? Well, there’s a couple of options. There’s Sim Daltonism, an app that allows users to preview their screens like a color blind person would see them. If you’re having even a little bit of trouble distinguishing designs when previewing through this, most likely, I would too. There are plenty of color blindness simulation apps, this is just the one that seems to replicate what I see the best.
Another very important test is to see how your designs work in monochrome. This should be a regular test you’re performing on your designs, but it is extremely helpful when trying to avoid the likes of myself having trouble using your apps. Bringing a design into monochrome will allow you to see what hues are too close. If two colors of the same temperature (blue and purple, red and green, orange and red, etc.) have too similar of a hue, they will be extremely hard to tell apart. Google maps, despite using red and green for busy and no traffic, use colors of pretty different hues, allowing me to see the differences pretty well.
"Bringing a design into monochrome will allow you to see what hues are too close."
A really easy way to test your designs in monochrome (when on iPhone), is to go into your settings, and turn on the accessibility for Grayscale. After doing this, triple-pressing your home button will trigger the accessibility function on and off.
Google Maps’ way of showing amount of traffic
“But how are you a designer if you can’t see colors?”
Good question, I don’t know. I just fake that I know what I’m doing, and hope that my boss wont notice.
But actually, it makes my life a little bit easier (at least in terms of design, not so much with picking outfits). I spend less time in the initial parts of design worrying about ‘what shade of blue should I use?’ or ‘will this orange go well this color?’. Instead, I get to focus on does this layout work well, and does it work well in black and white. I don’t typically need to find another color blind person to validate my color choices. When I explain color choices to a client, I’m less focused on the names of the colors and more on the temperature or value of them, whether they promote the feeling or description I want them to. Red does not necessarily mean ‘no’ or ‘error’, but that particular temperature and vibrance may. Nothing about a cool, relaxed color screams error to me.
Even picking colors to use has become somewhat easier. Am I sitting here mixing paints until I find a perfect shade of blue? No. Do I expect those who aren’t color blind to do that? No. In fact, I tend to steal or borrow pre-made color palettes. Now, I’m not finding apps and copying their colors Hex for Hex, instead I’m finding compositions that I think have a really nice palette, and sampling from them. For example, Miley Cyrus’ music video for ‘We Can’t Stop’, in my opinion, has some awesome imagery and colors. I’ll steal from that. Same with ‘Stylo’ by the Gorillaz.
"I’m finding compositions that I think have a really nice palette, and sampling from them."
Frames from ‘We Can’t Stop’ by Miley Cyrus
Color selection
Frames from ‘Stylo’ by the Gorillaz
Color Selection
I’ll find nice photographs that have great color palettes, pieces of furniture, paintings, anything. These already established and proven pieces are a great source of color influence. Apps like Sip allow you to grab pixel sized color samples from your screen and use them in your designs. Qolor allows you to do this in the real world using your iPhone’s camera.
So, why did I read this?
You’ve got nothing else to do? You’re putting off your homework assignments? I don’t know. But hopefully, it’s because you want to make sure your apps are at an optimal level for everyone to use. Even though only a relatively small portion of the population is color blind, there is still a need to design with them in mind. And, if we are keeping that demographic in mind when making our color choices, we know that the final designs will work for everyone, resulting in a much, much better app and user experience.
Have any questions or want to get in contact? Feel free to shoot me a tweet and/or check out the work that myself and my co-workers are producing over at Intrepid Pursuits.
This post was originally published on Aaron's Medium profile.
