Creating accessible charts
Public sector data visualisations must meet WCAG 2.2 standards. Accessible data visualisation is good for everyone. It makes data easier for people to access and understand.
Where possible test your visualisations with assistive technologies such as screen readers.
Make sure important updates, changes and status information are available to assistive technologies and are not communicated through visual changes alone.
Structure and content
Use chart structure and content to communicate the message:
- use simple, familiar chart types
- structure content in a logical order: title, summary, then chart
- write titles that state the main message rather than the topic
- where the key insight changes based on user selections, use a descriptive title that explains the measure being shown
- present the key point in text, not only in the visual
- provide alt text that explains the insight rather than describing the chart
- label axes with units and scale
- use consistent scales and intervals
- include a data table and short summary alongside charts
- include the data source and reporting period if this helps users understand the context of the information
Choose chart types based on the structure of your data and the insight you want to communicate.
Colour and contrast
Use colour to support understanding. It should not be the only way to communicate meaning:
- use high-contrast elements to draw attention to key information, such as critical data points
- check text and data markers meet a contrast ratio of at least 4.5:1 against their background
- graphical elements essential to understanding the data must meet a contrast ratio of at least 3:1 against adjacent colours
- where possible, label lines, bars or chart segments to reduce reliance on legends
- place charts on a solid background of white (#FFFFFF) or Turas light grey (#F7F8FD)
- use consistent colours, labels and legends across charts
- use gridlines only if they support interpretation, using the greys available in the user interface colours
- combine colour with labels, patterns or textures
- use line styles, such as solid or dashed lines, to differentiate data
- vary line thickness where needed
Check colour contrasts meet WCAG 2.2 Level AA requirements using the WebAIM Contrast Checker.
A good test is to remove all colour from the chart. Would the chart still make sense? If the answer is no, it needs more than colour to communicate meaning.
Turas currently offers the following palettes:
Keyboard interaction
Make charts usable without a mouse so all users can access data and controls:
- make charts, tooltips and filters usable with a keyboard
- provide a clear, visible focus state to show where interaction is active
- trigger tooltips on focus or touch, not only hover
- ensure interactive elements follow a logical tab order without skipping or trapping focus
- provide access to essential data without relying on hover interactions
- provide click or tap alternatives for actions that would otherwise use dragging or panning
- touch targets should be at least 24×24px so they are easy to select
Zoom and motion
Charts must remain usable at high zoom levels and with reduced motion settings:
- charts should still work when zoomed at 400%
- offer controls to pause or stop animations
- small text or fine detail should not become unreadable when zoomed
- text should not overlap or the layout break when zoomed
- users should not have to scroll sideways to read content when zoomed
Adapting to different screen sizes
The following guidance applies to websites, dashboards and web applications. Follow it when content must adapt to different screen sizes and device orientations.
Design charts to adapt to smaller screen sizes:
- focus on the main point so users can understand the message without pinching or zooming
- avoid fixed-width container layouts so the chart adjusts to the available screen width
- allow text labels to wrap instead of truncating important information
- reflow content vertically where space is tight instead of forcing horizontal scrolling
- switch chart orientation from vertical to horizontal when category names are long
- simplify the chart layout by limiting the total amount of data points shown
- remove extra background gridlines and borders to prevent the chart from looking crowded
- move legends or keys below the chart area when space is limited
- provide an accessible data table beneath the chart as an alternative way to read the data
- make sure interactive controls and data tooltips work on touchscreens, not only on hover
- make touch targets at least 24 by 24 pixels around small data points
- disable canvas-level zoom and drag gestures to stop users from getting stuck or trapped while scrolling down the page
- reduce the number of categories or data points shown on smaller screens
Typography
Use typography to support clarity and readability in charts. Follow the Turas typography guidance for fonts, sizing and general readability:
- check text meets a contrast ratio of at least 4.5:1
- use text no smaller than 12px
- allow text to resize to at least 200%
- keep chart text clear and easy to read
- use visual hierarchy to show what matters most
- do not use bold, italics or capital letters as the only way to show a difference
- use bold text sparingly to draw attention to important values or information
- keep labels short and easy to scan
- use horizontal text where possible
- use consistent number formats, units, decimals and separators
- do not mix number formats without clear labelling
- make tooltip text readable and concise
- do not truncate labels unless the full label is available to read elsewhere