Charts and graphs
Only use a chart or graph on a page or in a document if it's necessary for understanding.
If you do use one, you must:
- include a clear, descriptive title
- explain the data in alt text or in the surrounding text, so that screen reader users can access the information
- make sure there's sufficient contrast between text or data elements and background colours (4.5:1), using a colour contrast checker, such as on the WebAIM website
- not use colour alone to convey meaning, you can add patterns, labels or shapes to differentiate areas
- use large, clear labels for axes, data points and series, and put the labels on or near the elements
- choose a sans-serif font in a readable size
- make sure all text is horizontal
- remove unnecessary elements like borders, backgrounds, gridlines and shadows
Alt text
Alt text must describe the contents and purpose of the chart or graph for users who cannot see it. Imagine you’re describing the chart or graph to someone over the phone. Focus on the key message, not just visual details.
Captions
Add a caption to briefly describe the chart or graph. This helps users decide if it's relevant to them and understand what it's about. Captions can go above or below the chart or graph.
Guide to presenting accessible data on GOV.UK
Office for National Statistics (ONS) guidance on data visualisation
Design System
Go to our Design System for details of our visual styles, components and patterns.