Provide more support for color palettes

[mgifford]

This closed issue (https://github.com/uswds/uswds/issues/3090) raised by @artsymartha68 highlighted an issue raised by our team at CivicActions. I appreciate that comments are closed for closed issues, but wanted to add to that thread, for when this enhancement reaches the roadmap.

Thought it was worth sharing this list of tools https://accessibility.civicactions.com/guide/tools#creating-palettes

There are a growing list of resources to consider for selecting and documenting color palettes. This is increasingly a challenge for sites also working to support dark mode.

An example palette or from Martha.

Color Cube is another great resource:

#4f97d1 #face00 #f2938c #a3b72c #449dac #ad8b65 #8889db #e0699f

or

#2c608a #936f38 #a23737 #607f35 #168092 #6b5947 #4d52af #ab2165

There is some guidance from the System Tokens: https://designsystem.digital.gov/design-tokens/color/system-tokens/

Using the Magic Number you can learn more about managing color contrast. But it would be useful to have some examples that have been tested. Most developers do not have a background in color theory, and just want to pick a palette that looks good to them & run. Would be excellent to just have a page that lists some that are "good".

Ultimately though you want to have a fill pattern or line styles to choose from for each of these. Unfortunately, many graphing tools do not support this at this point. I'm not sure if Excel or Google Sheets can implement this effectively yet. There is likely more control with tools like D3.js but would also require more education. Interactive charts are even more difficult..

Some related resources:

• https://www.betterment.com/design/accessible-data-visualization
• https://accessibility.psu.edu/images/charts/

[artsymartha68]

Thanks for continuing this request @mgifford (great to see your name here too!). Just feels like a handful of default colors would be great for folks to make this easier. It's not easy to choose graph colors.