Soft Launch Alert: The Digital Guidelines are a work in progress and subject to updates. Your feedback is highly valued and will help us improve! Digital Guidelines Feedback (Google Form)
Data visualizations, like charts and graphs, can be a valuable addition to virtually any digital solution. In order to add value for everyone, though, visualizations should adhere to some basic best practices. Contrast, typography, and motion and interaction guidelines are all applicable to visualizations. In addition to these:
- Avoid embeds if you can. If possible, opt for on-page visualizations instead of ones embedded via iframe.
- Think about color (and beyond). Contrast between chart elements is vital. Other aesthetic elements are really important, too.
- Use a minimum element spacing of 8px.
- Aim for a minimum legend spacing of 16px and, if you can, include labels, too.
- Use iconography (symbols) or patterns/textures in addition to color. Doing so will help your data elements be more distinct and recognizable.
- Make sure your visualizations are compatible with assistive technology (including screen readers). Manual testing is vital.
- Include data tables (and make accessing them easy) so that people can digest data in multiple ways. Tables must be well-organized and have a good (logical) structure.
- Enable sonification if possible.
- Verify mouse and keyboard navigation.
- Use ARIA appropriately (labels and roles)
- Provide meaningful alternative text.
- Keep it simple, consistent, and understandable.
- Use common visualization types (line, area, column/bar, and pie)
- Show your data in purposeful and simple ways.
- Make your most important information prominent.
- Sort data meaningfully.
- Limit data elements (as an example: 5 lines per line chart and 6 segments per pie chart)
- Use clear titles, labels, and descriptions. In general, titles, labels, and data should be left-aligned. Numerical data may be right-aligned.
- Use consistent sizing, spacing, and color schemes
- Identify what measurement unit you're using (if applicable)
Tools to Consider
The tools below have variable accessibility support out of the box.
| Library | Accessibility Support | Recommended For | Integrations Available For | Notes |
|---|---|---|---|---|
| Apache ECharts | Very strong | Common visualizations | Colorado.gov: AI or ECharts module (vendor support required) | Open source; Wrappers available for Vue, React, and Angular |
| Highcharts | Exceptional | Common visualizations | Colorado.gov: AI or Highcharts module (vendor support required) | License fees apply |
| Chart.js | Moderate to Strong | Common visualizations | Colorado.gov: potential modules or AI exploitation | MIT license; performant |
| D3.js | Limited; customization potential. | Complex visualizations, custom development | Colorado.gov: potential modules or AI exploitation | Extremely flexible |
| Vega-Lite | Limited; customization potential | Complex visualizations, custom development | Unknown | Valuable SVG output |
| Datatables | Moderate to strong | Interactive tabular data | Colorado.gov: via internal Asset Injector repository or vendor support |
More to Explore
- Highly Recommended - Data visualizations: charts from the UK Government Analysis Function
- USWDS Component (Guidance): Data visualizations