A new approach to AA Accessibility

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.

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.

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.

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.

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.

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.

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 to making our product accessible to more people.