Instructional Designer

Designing for Accessibility: Colorblindness


Too many people are scared of using color in their E-Learning for fear of not being accessible to people who are colorblind. Take red for example. It can be a scary color to use. The color red symbolizes danger, blood, and anger. However, it also means energy, passion, and power. Using the color red is about using it with purpose and intent. If you are considering people who are colorblind, then a few extra steps is all it takes to ensure that everyone is able to view your content equally.

How do you ensure accessibility for people who are colorblind? Never use (only) color to convey a meaning that is important to your e-Learning. Know that, and then follow 2C-PR!

Clarity and Contrast, are my friends the 2 C’s. As research shows, people who are colorblind do not have trouble with the lightness or a darkness of a color, but with its hue. To help them with this, we need to ensure that the contrast on our slides and eLearning content is high. There are a few good tools on the web to help you…

WebAIM has a great contrast checker that is free to use. They also have a WAVE tool that helps check webpages.

Following that is the Clarity of the eLearning, slides or other presentations. Remember that clarity is about seeing things clearly (for all!) not just about ensuring that the images in your learning are not blurry. Clarity is also about showing the clear meaning for all the elements you are presenting to your learner. Use legends and call outs, employ patterns, shapes and letters to showcase ideas and thoughts. Bring in our friend Contrast and ensure that colors that are next to each other have high contrast. Label all images and charts, use legends. Arrows and call outs are your friend, not just to people who are colorblind, but to everyone.

Something you can do to check the clarity of anything you are making, is to view them in greyscale. In PowerPoint, you can do this easily, by going to VIEW, then Greyscale. Review each slide carefully. Can you see all elements clearly? Does it all make sense? Do you give enough information to ensure that your learning objective is met?

The P in 2C-PR is for Patterns. When and where appropriate, consider using Patterns. While using patterns can be intimidating, it can really help you ensure that your learning is clear to those who are colorblind.

One way to use patterns is to vary your line styles.
One such company who has used patterns is Trello. I love their Colorblind mode, which users use instead of solid colors to distinguish between their boards. Try something like this yourself!

The R in 2C-PR stands for Redundancy. In this case, redundancy means adding meaning to color. Icons and text over shapes work well here. Simply adding in a red or green shape doesn’t always convey the meaning you want. Adding in icons helps everyone, not just people who are colorblind, to understand what you are trying to convey.

Redundancy ties into Clarity. Making your eLearning clear for all means ensuring that everyone has access to the same information. Adding icons, arrows, call outs, and legends is a great way to ensure your eLearning is accessible to all your learners.

Finally, use web tools such as WebAIM and COBLIS to help you! Coblis is an amazing tool that helps you see what your images look like to a person who is colorblind. Note that there are many different types of colorblindness. This tool helps you see 8 of them. To use it, you simply save what you want to check as an image file and then upload it onto the website (it also supports drag and drop). Once there, choose your type and the image will render below.