How to Make Charts Accessible for Colour Blindness

A chart can be technically correct and still leave readers unable to understand it. The common culprit is colour being asked to do all the work: a red line means one thing, a green line another, and the legend is the only key. For people with colour vision deficiency—and for many people viewing a chart in glare, on a poor display, or in monochrome—that creates unnecessary friction.

The solution is not to stop using colour. Use colour as one cue among several. This guide turns that principle into practical decisions for charts, dashboards, maps, and infographics.

The core rule: colour cannot be the only cue

WCAG Success Criterion 1.4.1 requires that colour is not the only visual means used to convey information, indicate an action, prompt a response, or distinguish a visual element. For data graphics, that means a reader should still be able to tell categories, series, status, or meaning apart without identifying a hue.

Good alternatives include:

• Direct text labels and values
• Different marker shapes on lines or points
• Solid, dashed, and dotted line styles
• Patterns, textures, or outlines in bars and areas
• Clear icons and descriptive legend text
• A data table or text summary that gives the same essential information

The best combination depends on the chart type and whether the reader needs a quick overview or exact values.

Build the chart around the question

Before choosing colours, write one sentence that states the chart’s key message. For example: “Sales grew in every region, with the strongest growth in the west.” Then check whether a reader could answer that question if the chart were viewed in grayscale.

If the answer is no, add a non-colour cue. This single test catches the most common accessibility mistake: using a palette that looks attractive but encodes information only through hue.

Use direct labels before a distant legend

Legends force the reader to match a small swatch to a chart element, sometimes repeatedly. This is harder when colours are similar or lines cross. Where space permits, label the series at the line end, place values beside bars, or annotate the important point directly.

For example, instead of a blue, orange, and green line with a legend at the bottom, add the category name next to the final point of each line. Keep the label close enough that it cannot be mistaken for another series. The colour remains helpful, but the text does the identifying.

Match redundant cues to the chart type

Line charts

Use a combination of line style, marker shape, and end labels. A solid line with circles, a dashed line with squares, and a dotted line with triangles remain distinguishable even when their colours look alike.

Avoid having too many series on one chart. When there are many, consider small multiples—separate, consistently scaled charts—rather than expecting readers to untangle a dense legend.

Bar charts

Use direct category labels and values. If bars represent categories that must be distinguished in the same group, add patterns or a clear outline in addition to colour. W3C’s G111 technique specifically describes using colour and pattern together for bars.

For stacked bars, label segments directly when possible and provide a supporting table. Thin segments are difficult for everyone to read, even with a good palette.

Scatter plots and bubble charts

Pair marker shapes with colour, and use enough size and contrast for markers not to disappear. Add a border around points where the fill is light or the background is busy. If points overlap, offer filtering, a data table, or a second view that separates groups.

Maps and heat maps

Use labels, boundaries, symbols, or patterns in addition to fill colour. A transit map, for example, can pair each route colour with a distinctive stop marker. On a choropleth map, do not make the exact message depend only on a subtle light-to-dark gradient; include a visible scale, values, and a table or textual takeaway.

Design for contrast, not just different hues

Colours can be different in hue but similar in lightness, so they merge in grayscale or under a colour-vision difference. Contrast is especially important for thin lines, small markers, chart boundaries, and text.

For non-text graphical objects that are required to understand the chart, WCAG’s non-text contrast guidance generally uses a 3:1 contrast threshold against adjacent colours. Context matters, and a label or equivalent table can sometimes convey the information without requiring a reader to distinguish the graphic alone. Treat contrast checking as one part of the design review, not a replacement for labels and redundant cues.

Use the contrast checker to explore foreground/background contrast for interface text and simple visual elements. Then inspect the complete chart: real layouts introduce adjacency, thin strokes, hover states, and overlays that a single colour-pair check cannot capture.

Give readers the data behind the picture

Charts are summaries, not substitutes for data access. When a chart carries an important decision or claim, include one or more of these:

• A nearby table with categories and values
• A concise written summary of the main insight
• An accessible download such as CSV
• A long description for complex visual relationships
• Keyboard-accessible tooltips or a focusable data view for interactive charts

This improves usability for screen-reader users as well as people who cannot distinguish every visual encoding. It also lets readers verify the message without estimating bar heights or pie slices.

A practical chart review checklist

Use this before publishing a report, presentation, product dashboard, or article:

• Does the title state what the chart is about and the time period?
• Can each series or category be identified without colour alone?
• Are the essential values labelled, available in a table, or described in nearby text?
• Do lines, markers, bars, and legend items have enough contrast where they touch or overlap?
• Are labels readable at ordinary zoom and on a small screen?
• Does the chart avoid ambiguous red/green status labels such as “good” and “bad” without text or an icon?
• Can someone using a keyboard reach an interactive chart’s information?
• Does a grayscale or colour-vision simulation review reveal any ambiguous elements?

Test with real content and real people

Automated checks and simulations are useful early-warning tools, but they are not proof that a chart works for every person. Test the finished chart at its real size, in the product or document where it will appear. Ask a participant to identify the most important series, the highest value, and the takeaway without coaching.

Our colour vision simulator can help designers explore how an image may appear under several common colour-vision differences. Treat it as an additional review step, not as a substitute for user research or WCAG evaluation.

For broader interface guidance, see design for colour blindness.

Example: improving a status chart

Imagine a dashboard with five departments: green bars mean on target, red bars mean behind target, and yellow bars mean at risk. A more accessible version could:

1. Add the status word to each bar: “On target,” “At risk,” or “Behind.”
2. Use an icon in the label, such as a check, alert triangle, or arrow, with text that explains it.
3. Use patterns or outlines as a second visual cue.
4. Show the actual percentage and target value.
5. Provide a table below the chart with department, current value, target, and status.

Colour still makes the pattern faster to scan for many users. It simply is no longer the only route to understanding.

The bottom line

Accessible charts make the message resilient. Direct labels, patterns, line styles, contrast, and equivalent data help people with colour vision deficiency understand the same information as everyone else—and make your work clearer for the whole audience.