How to Design for Color Blindness

How can we be inclusive of those with color blindness?

Now most of us have heard of colorblindness or even know someone who has it.

Or we’ve seen tests roaming around the internet with a large circle with a bunch of little circles that are colored that form numbers to see if we can see the number in order to know if we’re colorblind or not.

What is colorblindness?

Colorblindness is a condition that affects a person’s ability to be able to distinguish between different colors.

And this can range from being a mild to severe impairment. Everyone can see differently as far as their vision goes.

And colorblindness is no different.

So everyone can see a different amount of colors. Some colors that someone without colorblindness can see, start to look like the exact same colors to someone who is colorblind.

The term colorblindness might be deceiving, because it might make some people think that if someone’s colorblind, that means they are blind.

But in fact, people who are color blind fit anywhere along the vision spectrum, anywhere from perfect vision all the way to blind.

So being colorblind doesn’t affect your vision at all. It just affects what colors you’re able to see.

How does colorblindness work?

Now a brief overview of the science behind color blindness. We all have about 120 million rods in our retina, which help us be able to see mainly in the dark.

And then we also have about 6 million cones in our eyes. And the combination of these cones and rods helps us be able to see color.

Now the 6 million cones that we have in our retinas, can have a short, medium or long wavelength, or these are tied to the colors red, green, and blue.

So a third of the cones that we have are red, a third of them are blue, And a third of them are green.

Now the three different types of color cones we have overlap to create different colors that we can see.

Now when one of the cones is shifted too far, it limits the amount of colors that someone can see, which causes color blindness.

It’s also possible that people have cones that are missing, and that would cause a more severe type of colorblindness.

Colorblindness is usually inherited or a genetic characteristic and is carried through the X chromosome, which means men are more likely to be colorblind.

One in 12 men or 8% are colorblind. Whereas, only one in 200 or 0.3% women are colorblind.

I don’t consider myself an expert on this topic. And if you want to know more about how colorblindness works, I highly suggest this other YouTube video that I found that really helped me understand it better,

Now let’s talk about the three main types of colorblindness that exist.

1. Dueternopia

The first and most common type of colorblindness is Dueternopia.

5% of men have this type.

Someone with Dueternopia has a green deficiency, which can make it difficult to distinguish between greens and reds.

2. Protanopia

The second type of colorblindness is Protanopia. And this is more rare. Only about 2.5% of men have this type.

Someone with Protanopia has a red deficiency, which can make it difficult to distinguish between reds and greens.

These two types (Dueternopia and Protanopia) of colorblindness are the most common and are very similar. They just affect different cones.

An interesting example to think about in real life with these two types of colorblindness is a stoplight. Now think about it. The people who are colorblind with these two groups probably just have to memorize that red is on top and green is on bottom. Otherwise, they might get into an accident going through a traffic light when they shouldn’t be.

3. Tritanopia

The third type of colorblindness is Tritanopia, which is very rare, only about 0.5% of men and 0.03% of women have it.

Someone with Tritanopia has a blue deficiency, which can make it difficult to distinguish between blues and yellows.

4. Monochromatic

Monochromatic is the fourth type of colorblindness, which is extremely rare, is when someone sees in monochromatic grayscale. So they see from black to white, and they can’t see any color all.

So as we look at the different types of colorblind rainbows, I think it’s interesting to know that black, white and shades of grey can be noticed on all of the different groups of colorblindness.

Knowing this, it can be used as a powerful design tool, we can use these colors to make our designs more accessible.

The images below show a rainbow spectrum of each type of colorblindness being simulated to visualize the differences in context.

Here is the rainbow, as someone would see it who is not color blind for reference.

First here we have Dueternopia.

Then we have Protanopia

Tritanopia

and finally Monochromatic.

Unless you’re colorblind, you’re going to have to use your imagination to think about what it would be like to see this way 100% of the time.

Imagine you are a child and you don’t realize yet that you see differently than the majority of the people around you. And your teacher asks you to bring her green notebook. But instead you bring her red one. And the whole class starts to giggle and laugh at you.

Or you’re excited to show your friend your newly painted bedroom. And she argues with you for 10 minutes about what color is and she makes you feel bad for not seeing color the same way she does.

Or you’re a college student who works at a restaurant where your employer relies on you being able to tell the difference between color coded labels to know what item to give to your customers, but you’re too embarrassed to tell your employer and so you do your best to use process of elimination to figure out what order it goes to who.

So for those of us who aren’t colorblind, we need to find ways to build empathy for those who are colorblind, we need to create designs and systems that work for anyone. Regardless of what color they can see.

We can use texture, pattern, shapes, sound or even smell to help us with a design system.

And when we do need to rely on color, it would be great if we could be more intentional about what pairing of colors we use.

Just like other impairments, it’s important to remember that colorblindness has emotional struggles with as well. And it’s not all about just being able to see the correct colors. We need to do our best to be inclusive of those who are colorblind, and not just expect them to adapt to their surroundings.

Once again, just remember that this is something they have to deal with 100% of the time. And that can’t be easy. And there are some simple ways that we can test whether or not a design will work for someone who’s colorblind.

I’m going to show you a couple of my favorite tools now.

The first tool I’m going to show you is www.colorblindness.com.

Now this is a website where you can go and you can put in an image and then you select which type of color blindness you want to simulate.

The second tool that I like to use is Color Oracle.

You can find it on www.colororacle.org and it works for Mac Windows or Linux.

Color Oracle is great because it shows you a real time simulation of what it looks like to have a color impairment. And then once you’ve downloaded the application, all you have to do is go to the icon on the top menu bar and you can switch through the different modes if you want to see a specific type of colorblindness.

If you want to see me demonstrate how these tools work you can see that in my video.

One helpful tip is to design in grayscale first or early on in your design process to make sure it works first, and then you can add color.

This really helps me improve the design without relying heavily on the color.

I hope that you’ve learned a little bit more about color blindness, and that you’ll consider running some simulated tests next time that you have a design or a system that you’re thinking about creating.

Let’s work together to make it a habit to keep in mind those with color blindness throughout our process, and try to not rely solely on color.

References