Accessible data visualization means building charts that people can read whatever their vision, device or assistive technology. A chart that only works if you can tell two shades of green apart, see small grey text or use a mouse leaves out a large part of your audience. The fixes are mostly small, and most of them make the chart clearer for everyone.
What is accessible data visualization?
Accessible data visualization is a chart that stays readable for people with low vision, colour blindness, or who use a screen reader or keyboard. In practice: enough contrast, no meaning carried by colour alone, labels on the data itself, a text description, and the numbers available as a table.
These rules follow the Web Content Accessibility Guidelines (WCAG) 2.2, the standard most accessibility laws and procurement rules refer to. The eight rules below are the ones that matter most for charts.
1. Check contrast, not just colour
Low contrast is the most common accessibility failure in charts. WCAG sets minimum ratios between a colour and the background it sits on:
| What | Minimum contrast | WCAG criterion |
|---|---|---|
| Normal text (labels, axis ticks, source line) | 4.5:1 | 1.4.3 |
| Large text (about 18 pt, or 14 pt bold) | 3:1 | 1.4.3 |
| Chart marks that carry meaning (lines, bars, slices) | 3:1 against their background | 1.4.11 |
Light grey gridlines are decoration, so they can stay faint. The axis text, the data and the labels cannot. A pale yellow line on white fails the 3:1 test however pretty it looks, so check each series against the background with a free contrast checker before you publish.
2. Never use colour as the only signal
About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, according to Colour Blind Awareness. Red and green are the pair that most often merge. WCAG calls this out directly: colour must not be the only way to show a difference (criterion 1.4.1).
Back every colour up with a second cue:
- Label lines and segments by name, not only by a legend.
- Vary the line style or add markers when series cross.
- Use a lightness difference, not just a hue difference, so the series still separate in greyscale.
Our guide to blind-friendly colours in data visualization goes through palettes that survive the common types of colour blindness.
3. Label the data directly
A legend makes readers look back and forth and match colours. Putting the name at the end of each line, or inside each bar, removes the matching step. It helps people with colour blindness, people with low vision who zoom in, and anyone reading on a small screen.
The line chart below is an example. Each of the three lines is named where it ends, so you do not need to tell the colours apart to read it. You can build the same thing with the line chart template.
4. Choose colour scales that are honest and distinguishable
For a number that runs from low to high, use one hue that goes from light to dark. Lightness is the one thing everyone reads the same way. Reserve two-hue diverging scales for values that sit on either side of a meaningful midpoint, and avoid rainbow scales, which have no natural order and put visually bright bands in the middle of the data.
Two more guides cover this: how to choose chart colours that do the legend's job and the hidden bias in colour scales. A grid chart such as a heatmap is where a poor scale does the most damage.
5. Make the text readable
Axis labels, tick labels and the source line are the text people most often cannot read. Keep them large enough to read without zooming, in a typeface with clear letter shapes, and in a colour that passes the 4.5:1 test from rule 1. Avoid putting labels over busy backgrounds, and do not rotate long labels to an angle when a horizontal bar chart would let them sit flat.
6. Write a text alternative
A screen reader cannot see a chart, so it needs a description. The W3C guidance on complex images recommends two parts: a short alternative text that says what the chart is, and a longer description nearby that gives the finding and the key numbers.
Good alternative text names the chart type, the subject and the main conclusion. Compare these two:
- Weak: "Line chart of interest rates."
- Better: "Line chart of US interest rates, 2019 to 2026. The 30-year mortgage rate rose from about 3% in 2021 to 7.33% in October 2026."
Several PlotSet templates, including the line chart, heatmap and Marimekko, have a screen reader summary field in their settings. Fill it in, and repeat the key point in the text of your page.
7. Offer the data as a table
A table is the most reliable alternative to a chart. Screen reader users can move through it cell by cell, and everyone else can look up an exact number. Link the CSV, or put a small table under the chart. If the chart has hover popups, make sure the same figures are available without a mouse.
8. Keep the design simple enough to follow
Every extra series, annotation and decoration is something a person has to work through. Show fewer lines and highlight the one that matters, use a plain title that states the finding, and put the source in the footer. Choosing a simpler chart type is often the most accessible change of all: a bar chart with direct labels is easier to read than a dense chart with a legend.
An accessibility check before you publish
- Do text and chart marks meet 4.5:1 and 3:1 against the background?
- Does the chart still make sense in greyscale?
- Is every series labelled without relying on colour?
- Is there a text description and a link to the data?
- Can you read it on a phone without zooming?
FAQ
What makes a data visualization accessible?
Enough contrast, a second cue beyond colour, direct labels, a text alternative and the underlying data in a table. Each one removes a barrier for a different group of readers, so the combined effect is a chart that works for almost everyone.
What is the best colour palette for colour blind readers?
Use a palette that varies in lightness as well as hue, and avoid putting red and green next to each other. Test it with a colour blindness simulator, and add direct labels so the colours are not doing all the work.
How do I write alt text for a chart?
Name the chart type and subject, then state the main finding with one or two numbers. Put the longer explanation in the text of the page, as the W3C suggests for complex images.
Does WCAG apply to charts?
Yes. A chart is non-text content, so it needs a text alternative (1.1.1), must not rely on colour alone (1.4.1), and its text and graphical elements must meet the contrast ratios in 1.4.3 and 1.4.11.
How do I check a chart before I publish it?
Preview it in greyscale, run the text and marks through a contrast checker and read the description aloud. In PlotSet, fill in the screen reader summary in the chart settings and link the data below the embed.
