Allowing folks to change color sounds great on the surface but... can lead to visual inconsistency and completely inaccessible products without intention.

• Customer style guides and the palettes they bring you vary greatly

• Every component's color needs are different, based on interactivity and contrast

• Managing every possible color combination is nearly impossible

Our team has been working on ways to simplify theming that allows color steps to predictably map to specific use cases to ensure an accessible experience. Huge shoutouts to key resources along the way that helped us out!

Resources

The universal color palette by Kevin Muldoon maps out a systematic approach to solving for consistent contrast. He describes tonal categories that map to the contrast needs of specific components and semantic use cases.

How to define color usage through semantic sets for design systems by Katie Cooper dives into how you can then map color steps to a consistent semantic color naming framework for use as variables and tokens in your design system.

Color contrast grid by Nathan Curtis is our standby tool that we then use to take the resulting colors and produce a color safe mapping for the team to understand all of the possible color combinations and which are accessible.

Bonus, there's a Figma plugin version as well

Takeaways

All of this has allowed our team at Exygy to come up with a repeatable process. We hope that your team might find some of these steps useful:

• Create color ramps with a robust tonal scale of shadows, mid-tones, 1/4 tones, and highlights

• Determine contrast ratios for various foreground and background combinations

• Extract repeatable color steps and map those to known semantic foreground and background colors

• Repeat and test across all colors of your palette to ensure consistency and accessibility