Comunidad de diseñadores puertorriqueños

Tips for working with a colorblind audience as a designer and what is colorblindness

Colorblind Webpic

First of all, let’s talk about what colorblindness actually is!

It’s incredible the amount of people that actually know about colorblindness, how many? Well, just a little. In fact most people that I’ve asked if they know what it is have answered that either they don’t know what it is or they say that it’s people who see black in white. While the latter it’s not a bad answer, there’s more to it. Colorblindness it’s a condition of color vision deficiency, just like it sounds, it’s quite an uncommon condition that is characterized “inability to clearly distinguish different colors of the spectrum”. There are several kinds of this same condition. There are the following are:

  • Monochromatism: Either no cones available or just one type of them.
  • Dichromatism: Only two different cone types, the third one is missing completely.
  • Anomalous trichromatism: All three types but with shifted peaks of sensitivity for one of them. This results in a smaller color spectrum.
  • Tritanopia/Tritanomaly: Missing/malfunctioning S-cone (blue).
  • Deuteranopia/Deuteranomaly: Missing/Malfunctioning M-cone (green).
  • Protanopia/Protanomaly: Missing/malfunctioning L-cone (red).

Well, now that we know what colorblindness is we can move on to the main topic, how to deal with it as a designer. Wether you’re dealing with a colorblind audience or you are colorblind, there’s a few things to know.

  • If it works on grayscale it works on color! I bet that you have heard of this since it’s basic but some people forget it, it’s the basic idea that if it works on black and white it works with color. And it’s damn right! The thing here is about the contrast. The contrast in the elements of your design should be recognizable, for example, if there are two buttons on an mobile app, etc, one button is red and the other green, the colorblind person might have a hard time deciding which one to press because he can’t see the difference. What I propose in this case would be to maybe have one button be blue and the other green. This happens a lot, it’s a very common mistake.
  • Monochrome! Similarly to the black and white technique, you could use just different tones of the same color.
  • Using thicker lines! Sometimes some colorblind people can actually see the color but only if there is “enough” of it. The solution, make thicker lines or even bigger elements on your design if possible.
  • Textures! Textures could be a real life saver in this regard, because it is much easier to distinguish than colors.
  • Avoid these color combinations! Green & Red; Green & Brown; Blue & Purple; Green & Blue; Light Green & Yellow; Blue & Grey; Green & Grey; Green & Black.

So that’s it folks, hope you learned something new and useful! I might tackle more on this subject later on especially things that could help colorblind designers.

Some of this information came from the following place: 99designs, my brain!

Leave a Reply