Data Visualizations

Accessibility First

Data visualizations — charts, graphs, maps, and infographics — must be accessible to all users, including those using screen readers, those with low vision, and those with color vision deficiencies. The USWDS provides guidance for making visualizations inclusive.

Color Usage

Never rely on color alone to convey meaning. Use patterns, labels, or other visual indicators alongside color to distinguish data series.

• Pair colors with text labels, patterns (hatching, dots), or distinct shapes
• Use --flex-color-* semantic tokens for consistency with the design system
• Test visualizations with a color blindness simulator to verify they remain readable

Alternative Text

Every chart or graph must have meaningful alternative text. The approach depends on the complexity:

• Simple charts: Use a descriptive alt attribute that conveys the data trend or key takeaway
• Complex charts: Provide a data table as a visible alternative or in a details/summary disclosure
• Interactive visualizations: Ensure keyboard navigation and screen reader announcements for data points

Contrast Requirements

Text and meaningful graphical elements in visualizations must meet WCAG contrast requirements:

• Text: 4.5:1 contrast ratio for normal text, 3:1 for large text
• Graphical objects: 3:1 contrast ratio against adjacent colors (axes, data points, lines)
• Adjacent data series: 3:1 contrast ratio between neighboring series where distinction matters

Further Reading

For comprehensive guidance, see the USWDS Data Visualizations documentation.