Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

artsymartha68 opened this issue Aug 28, 2019 · 7 comments
Type: Enhancement An improvement to existing code


Copy link

artsymartha68 commented Aug 28, 2019

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


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!

Copy link

Added reference images:

Screen Shot 2019-08-28 at 4 08 47 PM

Screen Shot 2019-08-28 at 4 08 36 PM

Screen Shot 2019-08-28 at 4 08 29 PM

Copy link

@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?

Copy link

@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!

Copy link

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?

Copy link

I believe I used this one for the screenshots above

@thisisdano thisisdano added topic: color Type: Enhancement An improvement to existing code labels Feb 23, 2021
Copy link

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.

Copy link

Graph colors were features in the NYTimes recently.

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.”

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Type: Enhancement An improvement to existing code
None yet

No branches or pull requests

4 participants