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"):
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.
Remember to use high-contrast text, even when the text is actually in an image.
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
Don't use color as the only way to convey content. You should also use direct text labels or changes in shape or texture. In the following example, the graph has its parts directly labeled, instead of relying on color matching with a legend. It also uses texture instead of color, to distinguish its elements. You do not need to do both:
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.