Using Color for Accessibility

Worldwide, around 4.5% of the population experiences color blindness, of which there are more than half a dozen different types.

The PDM home page as seen with simulated protanopia, a type of red-green color blindness.

How to Use Color Accessibly

When authoring a document or presentation, it’s fine to use color to draw attention or add visual interest. But to keep your content accessible, never use color as the only way to indicate meaning.

Using Colored Text

If using color to emphasize information, layor on another form of emphasis such as bold or italics.

Visual Aids

In our first pie chart example, several factors may cause difficulty for viewers:

1. Viewers with color blindness may have trouble telling the wedges apart.
2. They also may have difficulty matching the wedges to the legend below the graph.
3. The dark grey percentage labels don’t show up well against their background.

A More Accessible Example

In our second, more accessible pie chart, we’ve chosen a style with the following improvements:

1. White borders help users see where each wedge begins and ends.
2. The labels are adjacent to their corresponding wedges.
3. All text contrasts with its background.

With just a few thoughtful changes, we can make a visual aid that’s more impactful, no matter how viewers see it.

Resources

• More tips from Microsoft on improving image accessibility
• Color checker to ensure text contrasts with its background enough
• Learn more about different types of color vision deficiency