Chart Color Contrast: Check Adjacent Colors

Start with what the reader must understand

A palette can look varied and still make a chart difficult to read. Before choosing colors, write the chart’s message in a sentence and list the values a reader needs. A short description and a data table give another way to obtain the information. They also help when the chart is printed, zoomed or displayed on a narrow screen.

The sample below is an invented project-planning example, not measured research. It compares three work areas and the number of tasks completed. Keep the same names next to the chart marks so a reader can match a value without consulting a color-only legend.

Draw an adjacency map

For separate bars on white, each bar meets the white plotting surface. In a stacked bar, series may touch one another. A label inside a bar meets its fill; a label outside meets the plot surface. These are different test cases. Testing every palette pair equally can distract from the pairs that actually carry the chart’s meaning.

Inspect chart colors in the palette matrix →

Enter the three fills and #FFFFFF as four swatches. Read each fill/white ratio first for separated bars. The amber #E8B04B is a useful example of a bright fill that has weak contrast with white. If that boundary is required to read the bar, consider a darker fill or a sufficiently contrasting boundary; check the revised visual result. Do not choose white label text just because the fill is colorful.

These displayed ratios are rounded for reading; decisions use the full values. The green/white pair illustrates why a strong non-text contrast result is not automatically a 7:1 text result. The chart’s labels, boundaries and interaction still need their own checks.

Add information beyond hue

Put “Research 12”, “Writing 18” and “Review 9” near their corresponding bars. For a line chart, direct labels and distinct marker shapes can reduce dependence on a legend. Keep cues simple and test with users; excessive patterns can make a chart harder to read. A screen-reader description helps, but a visible alternative is also needed for sighted people who cannot distinguish the series colors.

1. Write a one-sentence description of the comparison or trend.
2. Show series names and values in visible text wherever practical.
3. Provide the same data in a semantic table with clear column headings.
4. Check meaningful marks and small text separately against their actual neighbors.
5. Test focus and keyboard access when readers can interact with the chart.

Distinguish contrast from color-vision simulation

WCAG contrast ratios compare relative luminance. They do not simulate all types of color-vision deficiency or prove that two hues can be named or distinguished reliably. Two colors with the same luminance have a 1:1 ratio even if they look very different to you. Conversely, a palette with passing text pairs can still rely entirely on hue to identify its categories.

ColorPairLab calculates opaque sRGB pairs and can help you inspect the relationships you identify. It does not automatically inspect chart geometry, run a color-vision simulation, verify screen-reader announcements or certify a chart. Gradients, overlapping semi-transparent marks and image backgrounds require a review of their final rendered colors.

Change the chart when the palette is not enough

If adjacent series cannot be distinguished while preserving the design constraints, try separating bars, moving labels outside marks or showing smaller charts with shared axes. A different layout can remove a difficult adjacency instead of forcing every series to contrast with every other one. Recheck the final chart at mobile size and in the exported format.

Plan button and focus colors for chart controls →