Skip to main content
WCAGrules
Quick navigation

Separate adjoining chart colors with real contrast

Where a graphic puts colors next to each other and the boundary carries meaning, G209 asks that neighboring colors differ by at least 3:1. Pie slices, stacked bars, map regions, diagram blocks. Where they do not, W3C accepts a border. It sets one condition people miss, which is that the border has to clear 3:1 against each of the colors it separates rather than against one of them. This is a sufficient technique for 1.4.11 Non-text Contrast at Level AA, scoped to making graphical content understandable. In practice a chart mixing light and dark segments often needs a two-tone boundary to satisfy both sides at once. We also treat a chart as passing where the same information is available as labels or as a data table. That is our reading of the rule's own scope rather than something W3C states in this technique.

How we find it in an audit

Our reviewers measure adjacent pairs in every chart, map and diagram. That is slower than it sounds, because the pairs are what matter rather than each color against the background. Where borders are present, we measure them against both neighbors. Then we look for labels or a data table, since either one usually makes the whole question easier.

How affected users experience it

A four-pastel pie chart is one shape to a reader with a color vision deficiency, and roughly one shape to anybody on a poor screen. Values hidden in a hover tooltip help nobody using a keyboard or a touchscreen. Labeling each segment and publishing the numbers as a table underneath makes the chart work for people who cannot separate the colors and for people who cannot see it at all.

Passes vs. fails

Passes: clears the ratio this rule sets. Fails: fashionable, unreadable gray.

Passes

The same chart with a dark one-pixel border between slices, each slice labeled with its percentage, and a data table underneath.

Fails

A budget pie chart in four pastels, adjacent slices under 1.5:1 apart, no borders, and the values shown only in a hover tooltip.

Other ways to satisfy this rule

6 guides on this site are filed under 1.4.11 Non-text Contrast. W3C lists this one as sufficient for that rule when used for making graphical content understandable, so the condition is part of the test rather than a footnote to it.

This guide is our interpretation of W3C technique G209: Provide sufficient contrast at the boundaries between adjoining colors. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations