Working with Color and Graphics

examples of poor and strong contrast. weak contrast makes things disappear, strong contrast makes things legible.

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).

Testing Contrast

Text: color contrast tools

For testing text color on background, we recommend using contrast ratio tools (you are aiming to pass "WCAG AA"):

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:

  1. Print out your graphic in grayscale.
  2. 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?
  3. Give your grayscale printout to someone who's never seen it.
  4. 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

Original pie chart example not directly labeled, relying on color matching

Same pie chart as seen with two kinds of colorblindness

pie chart as viewed with red blindness - many of the colors now appear to be the samepie chart as viewed with total color blindness, matching shades of grey is not possible

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

pie chart using texture and direct labels

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

simple black and white directly-labeled pie chart

Here is an example of "fixing" an inaccessible pie chart


inaccessible pie chart relying on color matching


accessible pie chart using direct labels. black borders and text have been added to make the chart high contrast