Accessible Bar Charts

A new approach to AA Accessibility

Reinvented how Bar charts can meet accessibility standards without sacrificing aesthetics.

Accessible multicolour bar chart designs

Context

Bar charts were not accessible

Our UX overhaul of Moz Pro was a big opportunity to improve accessibility within the tool, however, charts and visualizations proved difficult due to 2 main guidelines:

1.4.1 Use of Color (Level A) Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

1.4.11 Non-text Contrast (Level AA) The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components
Graphical Objects

This meant that our current bar charts could not rely on colour alone and needed to pass a contrast ratio of 3:1.

Strategy

Problems

Bar charts did not pass Level A accessibility standards

Our bar charts only relied on colours to convey information, and even then, those colours did not meet the required 3:1 contrast ratio. This violated 2 basic guidelines
1.4.1 Use of Color (Level A) Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1.4.11 Non-text Contrast (Level AA) The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components
- Graphical Objects

Goals

Redesign our bar charts
Bar colours should pass a 3:1 contrast ratio with their immediate background
Bars should be easily distinguishable and identifiable to their correlating data
Close the competitor-parity gap on quick-start overview pages

Step 01

Addressing the contrast ratio

The first thing I did was work on a set of new colours that passed a 3:1 contrast ratio.

As this would be for charts, I also wanted the colours to be more distinguishable from one another at a glance.

Step 02

Review with our Accessibility Agency

Throughout our redesign, we worked with an accessibility agency to critique and guide us. As colour alone could not be the only means to convey information, they told us the ONLY solution is to place patterns inside of our bars.

They sent us some examples, however, what they were proposing for our bar charts was not an elegant solution, and risked ruining the experience for a lot of our users.

Step 03

Adjusted the colours and created tints

I understood why the patterns were important; however, their proposal was not elegant.

I thought maybe I just needed to soften the patterns inside each bar so they were not so prominent. To do that, I adjusted the colours so each one had a tint that also passed a 3:1 contrast ratio.

What I learned
This didn’t work either. At all. More subtlety was needed.

Step 04

Explorations

Softening the lines inside did not do the trick so I decided to play around with the patterns themselves to make them less prominent.

One thing I quickly realized is that the guidelines did not state that the pattern must occupy the entirety of the bar. This paved the way for more subtle explorations, eventually leading to the final outcome.

Step 05

Final designs

I eventually landed on this. It passes contrast and uses subtle dots to tie the legend items to their appropriate bars.

Even someone with complete Achromatopsia will be able to understand these bars.

The Outcome

Bar charts that meet WCAG AA standards

We have not received any feedback, good or bad, about this change.

That’s okay, though. The bar charts that once failed a basic Accessibility test now pass AA standards. It’s one more step we’ve completed toward making our product accessible to more people.