Ensure chart colors are accessible

Problem to solve

As part of &896, the UX team audited GitLab to ensure that we are following standard WCAG standards in terms of Use of Color.

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

Our charts are currently not very accessible for those with visual impairments. For example, here is one of our column charts as seen by someone that suffers from protanopia (1% of the population):

Series in our line charts would also be hard to distinguish for someone with visual impairments.

Intended users

Everyone! If we want everyone to contribute, everyone should be able to view the data on the site.

Proposal

We could consider changing all of our chart colors. We could also offer some kind of 'accessibility mode' where users can change the chart colors/styles to accommodate their needs. Apple does something like this in their accessibility panel:

Which could look like:

What does success look like, and how can we measure that?

Ensure we are meeting WCAG standards

Links / references

https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/