Visa Product Design System

This chart component has built-in accessibility features to support creating accessible charts from the start. These include descriptive tag properties, keyboard navigation controls, and tools to ensure sufficient color contrast. Find accessibility guidance below.

Best practices

Ensure the following best practices are met when implementing this component to create accessible data experiences for everyone, everywhere.

Make thoughtful color choices

Ensure users of all abilities can understand the meaning of colors in your data visualization. Choose color combinations that provide sufficient contrast and add textures to support color-blind and low vision users.

Use accessible color palettes

Our data visualization color palettes are designed to ensure that data distinctions remain clear for users with various types of color vision deficiencies. Use this functionality to ensure sufficient contrast between colors and avoid relying only on color to differentiate categories or values.

For example, the Visa red to green divergent color palette ensures that all shades are seen as different values, even under different color-blindness simulators. Meanwhile, a default red to green color palette doesn’t make the shades distinct enough across the full range of the palette.

Red to green color palette shown in full color and in a Deuteranopia simulation, where the hues remain distinct and easy to differentiate in both versions.

Do Use color pairings that distinguish between colors to support different forms of color blindness.

Red to green color palette shown in full color and in a Deuteranopia simulation, where the simulated colors appear very similar, making the palette difficult to distinguish.

Don't Use color combinations known to cause issues for users with color blindness, like certain reds and greens.

Add contrast with textures

Textures help differentiate categories when color doesn’t provide enough contrast. Use the texture fill option in our bar charts to improve accessibility for users with color vision deficiencies and maintain clarity when charts are printed in grayscale.

Two‑line chart with one solid blue line marked by circles and one purple dashed line marked by hollow circles, showing how shapes and line styles distinguish categories.

Do Use textures as well as color to represent categories.

Two-line chart where both lines rely only on different colors blue and purple to represent categories, illustrating that color alone makes the lines hard to distinguish.

Don't Use color alone to distinguish between categories.

Outline light objects

Our chart components automatically add darker outlines to light-colored chart elements to ensure contrast and visibility against backgrounds and adjacent marks. Overriding this default behavior can make elements harder to distinguish from the chart background and reduce readability.

Two-line chart with a solid blue line using filled circle markers and a dashed purple line using hollow circle markers, both outlined for visibility against a light background.

Do Ensure that light-colored objects on a light background have an outline that meets contrast requirements.

Two-line chart with a solid blue line and a pale purple dashed line, both drawn in light colors that blend into the light background, making the lines and markers hard to see.

Don't Use light-colored objects against a light background or remove the default outline, as this makes it harder to view.

Write clear alternative text

Use the chart components’ descriptive tag properties to provide concise and informative alternative text for screen readers.

A table that provides guidance for writing chart accessibility properties.
Accessibility property	Guidance	Example
	Summarize what the chart shows and the type of data. Use simple language for straightforward charts. Describe the layout for uncommon chart types. Avoid repeating the chart title or subtitle.	“This bar chart shows monthly payment volume for this year compared to last year.” “This strip chart displays transaction volume across major European cities, with each city represented by a circle placed according to spending volume.”
	Clearly state the takeaway and highlight key statistical insights and trends. Group data points to show patterns or outliers. Do not list numbers without explaining their meaning.	“Sales numbers increased every month except June and July.” “Europe and Asia Pacific had over 5% growth, while Asia Pacific lagged the global average at 1%.”
	Explain which controls or filters affect the chart. Communicate any selections that have been applied to exclude or change the displayed data.	“The values in this chart are based on the filter selections applied to the dashboard.”
	Note special visual features not covered elsewhere, such as sorting or color grouping. Use only if previous fields do not fully describe the chart.	“Sorting is applied to show highest values first. Bars that are above average are highlighted in dark blue and all other bars are gray.”

Add descriptive labels for data

Use the chart components’ custom labeling options to provide clear and descriptive names for displayed data. Labels like “num_transactions” may work during analysis, but “Number of transactions” is easier for users to understand and interpret.

Data labels

Data labels are the textual representations of data values in charts or tables. Use descriptive labels when presenting data to end users to provide clarity and avoid technical jargon or shorthand that may confuse non-technical audiences.

Tooltips

Tooltips add contextual information about data points when users hover or focus on chart elements. Clear and descriptive labels in tooltips help users understand the meaning of the data without requiring knowledge of internal naming conventions.

Keyboard controls

Keyboard actions and their corresponding behaviors for line charts
Key	Behavior
`Enter`	Enter the chart area/drill down a level on the chart area or a line.
`Shift`+`Enter`	Drill up a level on a line or a point.
`←→`	Move among sibling lines or points when focusing on a line or a point.
`↑↓`	Move among points across lines when focusing on a line or a point.
`Control`+`Shift`	Press and hold when using the arrow keys for the best navigation experience on a Mac (VoiceOver).
`Esc`	Dismiss the tooltip at any time.
`Tab`	Exit the chart at any time.

Line chart

Best practices

Make thoughtful color choices

Use accessible color palettes

Add contrast with textures

Outline light objects

Write clear alternative text

Add descriptive labels for data

Data labels

Tooltips

Keyboard controls