Accessible charting colors

Creating Accessible Charting Colors

Have you wondered how to create a set of charting colors that will be accessible and usable for all users? In these video demos, I dive a bit deeper into this topic. 

Creating accessible chart colors

First, I’ll walk you through a scenario where you receive a set of five colors that your brand team wants to use. What are things to consider? How can we ensure that these colors will work from a data visualization standpoint?

Magnetic's updated charting color palette

Next, let’s take a look at the new charting colors in Magnetic’s design system and the strategy employed there for light and dark modes.

Summary

While these videos just scratch the surface of creating a holistic, accessible color system, there is so much more to explore in the world of colors. What else would you be interested to discuss and learn? Please leave a note in my Loom comments section!

Resources

The world of color is flush with a wide variety of resources -- something I will continue to explore and share in further articles on this topic. The list below is by no means exhaustive but here are the most relevant to the topics in these demos:

Figma

Color Differentiation Testing

Problems with Current Color Contrast (particularly for dark mode) WCAG 3’s APCA

LCH (Lightness Chroma Hue) Color Space

Colorblindness Simulators

Acknowledgments

🎉A huge shoutout goes to my colleagues at Duo for all their contributions to our color work so far:

  • Colin Fulton (Senior Accessibility Specialist) 

  • Kaush Ganesh (Senior Design Researcher)