This is the second post in my series about accessibility. The first post titled, Accessible provides an overview. This post dives deeper into a specific accessible aspect.

One element to consider when thinking about accessibility is color contrast. There are lots of reasons people see the content differently. They could be colorblind. They could be using an old monitor or different contrast settings. Maybe they’re in the sun or using a privacy screen cover. There’s a variety of reasons we see things differently, which is why it’s important to ensure color is not the only differentiator or descriptor on digital experiences.

Is it really that big of a deal?

Let’s just think about colorblind individuals. The National Eye Institute says as many as 8% of men and 0.5% of women with Northern European ancestry have the common form of red-green color blindness. In other words this impacts up to as many as 1 in 12 men and 1 in 200 women.

The guidelines

The University of Minnesota as a couple of rules to keep in mind when designing and creating digital experiences.

1. Never use color alone to show emphasis
2. Make sure there is good contrast between colors

These rules seem pretty simple right?

The first rule makes sense. Think about it, STOP signs are red, but they also have a unique shape. This gives people multiple indications of what the sign means. The same should be said for all digital experiences. Instead of saying, “Select the red button.” instructions could say, “Select the red, square button at the top of the screen.”

The second one is a little more subjective, which is why we need to look at what contrast is acceptable. The WCAG provides specific guidelines for contrast ratio based on the different levels of accessibility. You can read more about the ratios and actually test your colors here.

Helpful tools

There are lots of tools to help designers and developers better comply with the accessibility guidelines when it comes to color. Here are a couple of tools that my team and I use to simulate the experience of users who are colorblind.

1. Colorblind Website Filter – This tool by Toptal allows you to check your current site. It’s important as we’re not always designing and building new digital experiences when we think about compliance and how our current digital experiences are seen by others. This tool gives you a helpful side by side comparison of current urls.
2. Stark – This is a Sketch plugin that allows designers to simulate the colorblind experience in their design software. My team used this tool when we were working with a large Hospice organization on a redesign to show the colorblind experience as we were going through our design review. This allowed our team to demonstrate value and rationale in real time.

Color is important, which is why it needs to be thoughts about in a wholistic way.