An important color accessibility requirement is that your designs make sense without color. That means they shouldn’t rely on only color to communicate information.
It’s important because not all of your users can see color. If they aren’t able to get content because it’s only communicated with color, that can be a significant barrier for them.
Here are two easy-to-use tools that remove color from your webpage, so you can make sure your content makes sense even without color.
For more information, text steps, and examples, check out our article – Grayscale testing: The missing step in color accessibility.
Test use of color with WAVE
Learn how to remove color from a webpage using the free WAVE extension.
Transcript
Not everyone sees color or sees the same colors. That’s why it’s an accessibility requirement to use more than just color to communicate information.
In this video, we’ll use WAVE to remove color from the screen, or desaturate the page, so you can make sure the content still makes sense without color.
We’ll do this on two real-life examples.
First, is a bus route map. It has seven bus routes in different colors.
To desaturate the page, I’ll first activate the WAVE extension. The WAVE extension appears on the left of the webpage on the Details tab. All of the web accessibility result icons are also on the page. The result icons can make it difficult to view your design, so I’m going to remove those to declutter my view. In WAVE, I’ll uncheck all the result categories. This removes all the results from the page. Now, I’ll select the Contrast tab and then Desaturate page. Now, my page is in grayscale. I can go through the content, navigation, and interactive elements to make sure everything still makes sense without color.
This bus route is now in grayscale. I can’t tell which route is which without color, so this bus route map does not meet use of color accessibility requirements.
Let’s go through another example. I’m on the Pope Tech dashboard where there is a pie chart and bar graph. Each pie segment and bar have a different color and pattern. I’ll activate WAVE, uncheck the results on the Details tab to declutter my view, go to the Contrast tab and select Desaturate page. Because the pie segments and bars had simple patterns, I don’t need the color to know what data each part connects with. These do meet use of color accessibility requirements.
You’re ready to use WAVE to test your own web pages for use of color.
Test use of color with Chrome’s developer tools
Transcript
Color contrast is an accessibility requirement people are more familiar with. But, another requirement is not relying on only color to communicate information.
In this video, we’ll use Chrome’s Rendering tool to remove color from the page, so you can make sure the content makes sense without color.
Using Chrome, open the developer tools by right clicking and selecting Inspect. Now my developer tab is open at the bottom of the screen.
Next, select Customize and control DevTools, which looks like three vertical dots. Now, select More Tools then Rendering.
I’ll scroll down to Emulate vision deficiencies. From the dropdown, select Achromatopsia. This is complete color blindness and removes all color from the screen.
I’m on a weather website with a map that uses color to convey different weather warnings across the United States.
When I remove the color, I can’t tell which variation of gray corresponds with each of the weather warnings. This weather map does not meet use of color accessibility requirements.
You’re ready to use Chrome’s Rendering tool to test your pages for use of color.