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)
