Working with Color and Graphics
People with color blindness often have difficulty distinguishing certain colors, such as red and green or blue and yellow. Almost 5 percent of the population and 8 percent of men have some form of colorblindness. When color combinations (such as red text on a green background) are of insufficient contrast, the words can actually disappear to a person with colorblindness or other forms of low vision (cataracts, macular degeneration, etc.).
Select strong, contrasting color combinations for all text and by directly labeling things that are otherwise distinguished only by color on a page (think charts and graphs).
For testing text color on background, we recommend using contrast ratio tools (you are aiming to pass "WCAG AA"):
- WebAIM's color contrast checker (web-based)
- Tanguru contrast-finder(web-based)
- Paciello Color Contrast Analyser (downloadable tool)
Remember to use high-contrast text, even when the text is actually in an image.
Graphics: the grayscale test
Testing all the colors contrast ratios in a complicated graphic is a difficult task. In many cases, it is mathematically impossible for all of the colors to be high-contrast in relation to one another.
We recommend the grayscale test instead:
- Print out your graphic in grayscale.
- Ask yourself:
- Can I tell all the parts apart?
- Can I match them to the legend, if there is one?
- Are any words hard to read, even a little?
- Give your grayscale printout to someone who's never seen it.
- Ask them a few data-related questions about the chart.
If any of these fail, back to the drawing board! If you need help rethinking a visual to make it more accessible, please reach out.
Don't rely on color
This example is easy to distinguish, but only if you can see the colors as intended:
Original pie chart
Same pie chart as seen with two kinds of colorblindness
Pie chart using direct labels and texture
Don't overthink it
This simple example is accessible as is, because it is high-contrast and directly labeled. Of course, it is an image, so don't forget to add alt text.
To add color to this example, use any colors that are high-contrast to black.
Simple accessible pie chart
Here is an example of "fixing" an inaccessible pie chart