When the colors in the system are applied, it will be in compliance with color accessibility standards. We support Web Content Accessibility Guidelines 2.1 level AA which requires 4.5:1 contrast for text. We never rely on color for communication and we ensures that our product works for people with visual impairments and improves legibility for all users. To learn more about color accessibility read our blog written by our team.

Don’t Rely on Color Alone

Always pair color with another visual cue (e.g., text labels, patterns, shapes, position) to communicate information.

Ensure Sufficient Color Contrast

Text contrast should have at least 4.5:1 agains the background color
Object contrast or bars and in bar graphs or sections should be 3:1
Use approved chart tokens that are designed to meet these requirements across both light and dark modes
Avoid pastel shades or low-contrast tones on light or dark backgrounds

Use Accessible Color Palettes

Choose palettes designed for accessibility:

Categorical palettes with clearly distinguishable hues
Diverging palettes that emphasize the midpoint with contrasting directions
Stick to 5–6 colors max to maintain clarity
Ensure the visualization is responsive to different screen sizes and zoom levels

Labels: Direct and Informative

Prefer direct labeling over relying solely on a legend, especially in line or bar charts
Label axes clearly, with units and context, for example “Revenue (USD)”, “Time (weeks)”
Use human-readable formats, such as 1M instead of 1000000
Use abbreviations and truncations carefully; always prioritize legibility
Ensure text doesn’t overlap or get cut off at different screen sizes
Maintain sufficient contrast against backgrounds for readability
Avoid rotating labels unless necessary

Legends: Mapping Visuals to Meaning

Place the legend close to the chart, ideally above or beside it
Keep the order of legend items consistent with the chart’s data order
Use descriptive, concise labels, for example “2023 Revenue”, not just “Blue”
Include color swatches, patterns, or icons that match chart elements exactly
Make legends keyboard navigable and screen reader accessible when interactive

Interactivity and Keyboard Navigation

Interactive Charts

All controls (filters, toggles, sliders) must be keyboard navigable
Include ARIA labels, focus states, and semantic grouping
Provide a data table alternative for screen readers
Make the data available in an accessible table format

Tooltips should be

Accessible by keyboard
Readable by screenreaders

Tab order example

Chart Title
Legend
Filters
Data points (navigable)
Tooltip (when focused)

Screen Reader Support

Use aria-label on chart containers to describe the chart purpose
Use role=“img” with aria-describedby pointing to a summary
Include a text summary of the visualization, making sure to describe trends or patterns in the visualization

Animation and Motion

Avoid excessive animation, keep it purposeful, for example loading states
Respect user preferences by detecting and honoring prefers-reduced-motion
Should be short, non-looping, and minimal unless critical for understanding the data, for example, loading animations
Allow the user to turn off animation

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.

WCAG 2.1 Understanding 1.4.3

Non-text Contrast

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

WCAG 2.1 Understanding 1.4.11