Provide a default set of accessible colors for common charts and graphs

[artsymartha68]

Add default set of graph/chart color palette that supports accessibility requirements

Description

I recently had to come up with graph colors for a USDS project at OPM, and I was disappointed not to find a default palette in the USWSD. It's always hard to choose a set of graph colors that meet accessibility requirements. The current available colors are lovely and have everything one might need/want but it would be nice to suggest a good default set for a white background (to start!).

I would like to see a default set of 8 bar chart colors, line colors, and gauge colors. These seem to be the most common chart types--I worked as a designer a data analysis company for many years and this seemed to be enough charts/colors for most business users.

I am including my proposal with a preliminary attempt to validate that contrast ratios and discern-ability are good. The final palette should be officially blessed by a11y experts, I am about 75% there, but not fully!

Color specs (proposed)

Bar chart:

1st bar: blue-40 #4f97d1
2nd bar: yellow-20v #face00
3rd bar: red-30 #f2938c
4th bar: green-warm-30v #a3b72c
5th bar: cyan-40 #449dac
6th bar: gold-40 #ad8b65
7th bar: indigo-40 #8889db
8th bar: magenta-40 #e0699f

Line chart:

1st line: blue-60 #2c608a
2nd line: gold-50v #936f38
3rd line: red-60 #a23737
4th line: green-warm-30v #607f35
5th line: cyan-50 #168092
6th line: gold-60 #6b5947
7th line: indigo-60 #4d52af
8th line: magenta-40 #ab2165

Gauge colors:

green-warm-30v #a3b72c
yellow-20v #face00
red-50 #d83933

Blue-to-red gradient colors (for tree maps, heat maps, etc.)

blue-40 #4f97d1
gray-2 #f9f9f9
red-50 #d83933

Screenshots that show the proposal

I can't seem to upload any images to this repo. I will email them and cite this issue in the hopes the reviewers can put the two together!

[thisisdano]

Added reference images:

[jeremyzilar]

@artsymartha68 wouldn't you also want to optimize a bar chart to first be readable as black and white, then add color for as a progressive enhancement?

[artsymartha68]

@jeremyzilar I love your thought process and yes that would be ideal. Very difficult to do with 8 colors in my experience. Different pattern fills would be the best for b/w, but not all component libraries provide this feature.

Also a High Contrast theme would always be best for maximum a11y compliance, which I have also done in the past, but haven't quite gone so far as to suggest here. But that would be fantastic!

[perezsmanuel]

Is there a tool where I can plug in the HEX values of my organization's brand colors to see how they look by people with those different visual disabilities?

[artsymartha68]

I believe I used this one for the screenshots above
https://asada.website/webCVS/

[thisisdano]

Unfortunately, this is not on our current roadmap. Closing for now. But I'd love to be able to address it at some point, so I've given it some tags that should allow further consideration in the future.

[artsymartha68]

Graph colors were features in the NYTimes recently.
https://www.nytimes.com/2021/04/02/style/coronavirus-safety-colors-states.html

If this isn't a call to arms, I don't know what is! 😃

She wasn’t surprised the official guidance fell short of ideal visual standards. Government in the United States “has been traditionally a source of terrible design,” she said. “They just don’t have the resources. They don’t prioritize it.”