Making charts accessible

An accessible chart is one that more people can read correctly, including people with low vision, color vision deficiency, or who use a screen reader. In practice that means enough contrast, at least one cue besides color, text big enough to read on a phone, a written description that states what the chart shows, and the underlying numbers available as a table.

None of this needs special tools, and most of it makes the chart better for every reader. A chart with direct labels and a takeaway in the alt text is also faster to read for someone glancing at it on a train.

Contrast

Low contrast is the most common accessibility failure in charts, and the easiest to fix. Pale gridlines are fine, since they are meant to recede. Pale data and pale text are not.

The Web Content Accessibility Guidelines (WCAG) set a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and for graphical elements needed to understand the content, such as lines, bars and their outlines. Axis labels, annotations and the source line count as text. A light-gray label on white, which many tools use by default, often falls short.

Check contrast with any contrast checker before publishing, and check a second time if the chart will also appear on a dark background. A color that passes on white can fail on near-black, and the reverse is just as true.

Don't rely on color alone

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Others will see your chart printed in grayscale, on a washed-out projector, or on a phone in bright sun. If the only way to tell two series apart is their hue, some readers can't do it.

Add a second cue wherever color carries meaning. Name lines directly at their ends instead of using a color legend. Use a dashed or dotted line for the second series, or a different marker shape. For bars marked good or bad, add a plus or minus sign or the word itself. In a heatmap, make sure the color scale runs from light to dark so the order survives in grayscale. The color guide covers palettes that stay distinct for most types of color vision deficiency.

Alt text that states the finding

Alt text is the text a screen reader reads aloud in place of the image. "Chart" or "Bar chart of tickets by month" tells the listener that a chart exists and nothing about what it shows. Write alt text that gives the same takeaway a sighted reader gets.

A simple pattern works for most charts: what is measured and over what period, then the main pattern, then the key exception or comparison with real numbers. Keep it to one to three sentences. If the chart's title already states the takeaway and sits in the page as text, the alt text can focus on the supporting numbers instead of repeating the title.

Don't list every data point in alt text. A screen reader user can't skim it, and twelve monthly values read aloud are hard to hold in memory. Put the full numbers in a table instead.

Provide the data as a table

A data table is the most complete alternative to a chart. It lets screen reader users move through the values row by row, lets anyone check a number exactly, and makes the data easy to copy. It can sit below the chart, behind a "Show data" toggle, or in a downloadable file.

Use a real HTML table with header cells, not an image of a table or a grid of styled boxes. Keep the same rounding and units as the chart, and give the table a short caption that matches the chart title. If the chart has hundreds of points, a summary table (monthly averages, or the top ten) is often more useful than the full dataset.

Text size and layout

Small text is a problem for everyone past a certain size, not only for people with low vision. Charts designed on a large monitor and then shrunk to fit a phone often end up with 7-pixel tick labels.

Design for the smallest screen the chart will appear on. Keep tick labels at 12 pixels or more on screen, and titles and annotations larger. If the chart has to shrink, cut labels rather than shrinking them: show every second month, round to fewer digits, or switch long vertical category labels to horizontal bars where the labels have room. Avoid rotated text, and never set chart text in a light weight of a thin font. Make sure the chart still works when the browser zooms to 200%.

Screen readers and SVG

When a chart is an image file, a screen reader only gets the alt text. When it is an inline SVG, you have more options. Give the SVG role="img" and an aria-label, or a <title> element as its first child, so it is announced as one image with a name instead of a long list of shapes. Add a longer description in the surrounding text, or link it with aria-describedby.

Interactive charts need more care. Tooltips that appear only on mouse hover are unreachable by keyboard and screen reader users, so any value that only appears in a tooltip should also be available in the table. Make sure controls such as filters and play buttons can be reached with the Tab key and show a visible focus outline. Charting libraries differ a lot here, so test with a keyboard and a screen reader before you publish.

Motion and animation

Animated transitions can help a reader follow how one view changes into another, and they can also distract, trigger discomfort, or make a chart unreadable for people with vestibular disorders. Respect the operating system's reduced-motion setting (the prefers-reduced-motion media query on the web) by turning animations off or cutting them to a simple fade.

Never put the main point only in an animation. A bar chart race that ends on the final frame should still show that final frame, with labels, as a static chart. Avoid anything that flashes more than three times per second, and give looping or autoplaying animations a pause button.

Quick checklist