Clarissa Peterson: The colors you use on your website can cause problems for users who are color blind or those who have low vision. In this tutorial, you’ll learn what color blindness is, how it affects users, and how to choose different colors or other visual cues to distinguish information on the screen.

(Big Idea) Although most people who are color blind wouldn’t consider themselves to have a disability, not being able to tell apart certain colors can keep them from understanding and using a website. 4.5% of the population is color blind, mostly males. It’s not as the name seems to imply an inability to see color. They just happen to see colors differently than a person with normal vision can see.

On the screen is an example of how people with different types of color blindness may see certain colors. On the top, a typical rainbow of red, orange, yellow, green, blue, and purple. Below it, three of the most common types of color blindness (deuteranope, protanope, and tritanope) and how a person with each type would see the same rainbow. As you can see in the first two examples (deuteranope and protanope), red looks like a dark olive green. And orange and green both appear as similar shades of yellow-green.

The inability to distinguish between reds and greens is the most common type of color blindness. In the third example (tritanope), red, orange, and yellow are all shades of pink. And green looks like blue. Not being able to distinguish between the different colors can make it harder or sometimes impossible to tell things apart.

For example, here you see what a person with normal vision and a color blind person may see in a fruit market. Some of the fruits that look easy to tell apart in the photo on the left are very hard to tell apart in the photo on the right because the colors are so similar.

The same thing can happen on a website when you use colors to signify different things. In the physical world, people who are color blind can often rely on other cues like size, shape, and even labels. Some of these other cues may not be available on a website.

(Best Practice) We need to make sure that none of our content requires the ability to distinguish colors. And if it does, we need to add additional information to help color blind users. For example, here’s a map that I found online that shows how certain counties in California voted in some referendum. The person who designed the map chose red and green to differentiate how each county voted as you see on the left. On the right, you see what a color blind user sees. The red and green counties both appear in the exact same shade of green.

I’m not saying you can’t use color. There are definitely places where color can make information easy to understand. You just need to make sure that by using color, you aren’t excluding people who are color blind.

(Best Practice) Choose color combinations that a color blind user is more likely to be able to tell apart. Most but not all color blind users will be able to see the difference between blue and yellow. So that’s a better choice than red and green, which many color blind people will have difficulty with. You can also use different shades such as a light yellow and a dark blue to help make it easier to tell different colors apart.

Thinking about color will help more than users who are color blind. Here you see what a certain map looks like when it’s printed. The grayscale also will give you an idea if color blind users will be able to understand the information on the map.

On the left, you can see several different colors to show land, water, and which roads are main or secondary. On the right with the color removed, you can still tell things apart because the land and water are different shades of gray, and the main and secondary roads are different thicknesses. So you don’t need to avoid color in places where it would be useful, but you do need to make sure that you are choosing colors and other design elements that don’t exclude color blind users.

If you want to see what your site looks like to color blind users, there are several websites and browser extensions that can do a color blindness simulation. This one, Coblis, lets you upload an image, for example, screenshot of your design comp or a style guide, and see how it looks. This is the sample image they have on their site. And I can just click through the options to check out how the image would look to people with different types of color blindness.

Here’s another tool from Toptal where you can put in the URL of your website and test it with a few different types of color blindness. For more tips, check out our Resources section for links to articles and other tutorials that can help you expand on the concepts we’ve covered here. You’ll also find links to additional tools you can use to check how your site would look to color blind users.

Thanks so much for watching. Don’t forget to check out the other Take 5 videos as well as the entire course catalog here at Gymnasium.