How to visualise data accessibly

Choose the right chart type, apply the accessible series palette, and mark up your charts correctly so they work for keyboard and screen-reader users.

Objective

By the end of this guide you will be able to choose the right chart type for your data, apply the Sitka data series palette in both light and dark mode, and produce accessible SVG markup.

Choose the right chart type first

The most common data visualisation mistake is choosing a chart that doesn't match the nature of the data. Before opening your charting library, answer this question: what is the user trying to understand?

How do categories compare?Bar or Column chart

How has a value changed over time?Line chart

What share does each part contribute?Donut chart (2–4 segments only)

Is there a correlation between two variables?Scatter plot

How does density vary across two dimensions?Heatmap

How does volume accumulate over time?Stacked area chart (max 3 series)

See the full Data Visualisation guidelines for a complete chart-type reference table.

Apply the Sitka series palette

The Sitka series palette provides six colours that work in both themes and remain distinguishable under common colour-blindness conditions.

Series 1#34a865 / #219653

Series 2#60a5fa / #2563eb

Series 3#f59e0b / #d97706

Series 4#e879f9 / #a21caf

Series 5#fb923c / #ea580c

Series 6#94a3b8 / #64748b

Use the dark values in dark mode, light values in light mode. Never use the same colour twice in one chart. Beyond six series, switch to patterns, dashes, or point markers to differentiate.

Add a secondary encoding alongside colour

WCAG 1.4.1 requires that colour is not the only visual means of conveying information. For charts, this means adding at least one secondary encoding.

Direct labels

Label each line at its end point or each bar at its peak. Removes reliance on the legend entirely.

Point markers

Add distinct marker shapes (circle, square, triangle) per series on line and scatter charts.

Pattern fill

Use hatched or dotted fills for bar and area charts in addition to colour.

Data table

Include a visually hidden data table equivalent for screen reader users.

Write accessible SVG markup

SVG charts rendered in the DOM must have accessible markup so screen reader users get a meaningful description of the data.

<title id="chart-title">Monthly active users, Jan–Jun 2025</title>

Web users grew from 30K to 75K. iOS users grew from 20K to 55K.

</desc>

</svg>

<figcaption>Monthly active users increased 150% across both platforms.</figcaption>

</figure>

The aria-label should describe the key takeaway — not just the title. A screen reader user who cannot see the chart needs to understand the conclusion, not just the axis labels.

Validate in dark mode and under colour-blind simulation

1.Switch the OS to dark mode. Confirm the chart uses the dark series palette values.
2.Check that grid lines are at most 5% white opacity (rgba(255,255,255,0.05)) — heavier lines create noise.
3.In Figma, use Stark's colour-blind simulator. Run Deuteranopia and Protanopia filters.
4.Confirm each series is still distinguishable through shape/marker/label, not just colour.
5.Open the chart with VoiceOver or NVDA. Confirm the title and description read out correctly.

Data Visualisation guidelines Contrast How to ensure colour is accessible