Make chart data clearer and more accessible with additional styling techniques, rather than relying on color alone.
Get started: add a chart to your accessible design
Create a chart in an accessible design canvas.
Select or click on "Charts" in the left sidebar to add a chart or table to the design canvas.
Use text labels in addition to a legend
Legends and text labels make data in a chart clearer to readers by making the data more visible and easier to identify.
Select or click on the chart to bring up the Edit Chart menu in the top toolbar.
Select or click on Edit Chart to open chart setting options—including Data and Setup—in the right overlay panel.
Select or click the "Setup" tab. Toggle the Legend to ensure that it displays on the chart.
Use sufficient color contrast
Ensure the color contrast ratio of the labels and other text visible on the chart meets WCAG guidelines as identified by the Contrast Ratio tool in the Venngage Editor.
Select or click on the chart to bring up the Edit Chart menu in the top toolbar.
Select or click on Edit Chart to open chart setting options—including Data and Setup—in the right overlay panel.
Select or click the "Setup" tab.
Change the color of different elements of the chart:
-
Chart style (bar or line colors)
-
Grid lines (background lines visible behind bars
-
Horizontal Axis
-
Vertical Axis
-
Labels
-
Legend text color
Select or click the color picker square next to the element, and check the Contrast Ratio at the bottom of the color picker menu.
Change the color by clicking into the color picker or typing a hex code into the Hex text field. The Contrast Ratio score will update automatically when the color is changed.
Use white space between chart columns
Ensure the spacing between column charts and lines is sufficient to read the text and see the different columns, legend and data labels.
Resize the chart by selecting it with the space bar (keyboard) or clicking on it (mouse) to select it; then use the arrow keys (keyboard) or hold and drag (mouse to change the size.
Use patterns or icons to differentiate columns or lines
Additional elements like patterns or icons can help make data in a chart clearer for users with additional visual or cognitive accommodation needs. Display patterns to differentiate data, or use icons as data labels in your chart.
Display patterns to differentiate data
Double-click on a chart in your design or select "Edit Chart" from the top toolbar to add patterns to your chart data.
Select "Setup", the second tab in the Edit Chart pane.
Toggle "Show patterns" to display patterns over the bars, slices or lines in your chart.
Patterns are available for all chart types and are particularly helpful for those who have trouble differentiating color.
NOTE: Chart patterns look best when exported as a PNG or PNG HD. They may not export as shown in the Venngage Editor when downloading or printing to PDF in the Chrome browser (we're working on it!), so for better results when exporting in PDF, we recommend using Firefox.
Use icons as data labels
Select an icon from the menu in the left side bar and place it over or above a column to represent the data points. In the GIF below, a user adds an icon to each of the columns in a column chart, to represent three categories: Films, Video Games, and Books.
Add alt text to any icons you include in your charts, if they are conveying crucial or additional information that isn't included in the alt text description of the chart.
Describe the data in the chart in the alt text, and you don't need to include the additional visual elements.
In the chart below, "Media Preferences by Age Group", additional icons appear, helping to differentiate the data and make it clearer at a glance. This is helpful for readers with some visual or cognitive impairments, but the icons can be marked as decorative when the alt text describes the data in the chart.
Here's an example of how to write a long alt text description for the chart below:
"Media Preferences by Age Group" column chart. Three groups of columns with three columns in each group represent how many kids, teens and adults identified one category of media as their favorite, when given the choice between video games, films and tv, and books. In the first column group, most (28) kids said they liked films and tv best, followed by video games (24) and the least amount of kids (12) choosing books as their favorite. In the second column group, 30 teens chose video games over films and tv (18) and books (9). Adults, represented in the final column group, tended to prefer books, with 22 identifying those as their preferred form of media; 12 adults identified films and tv as their favorite; and 8 adults said they liked video games the best.
Note that the description does not include the decorative icons, as they do not convey additional information that isn't captured in the chart data itself. For more insights on what to include or omit, check out our article on writing helpful alt text.
Curious about upgrading? Compare our plan features side by side.