The why and how of designing a color variant and accessibility tool

As a developer, choosing colors for my designs has always been one of the more difficult tasks. To help I tend to use tools like Coolors, SASS Color Generator, and this color contrast checker.

My process used to look something like this:

1. Generate a palette using Coolors
2. Pick variants for each color using SASS Color Generator
3. Pair variants together into background/foreground combinations.
4. Check that the pairs are accessible using the color contrast checker.
5. Add my chosen colors to my design tool of choice (Figma).
6. Tweak colors and repeat from step 2.

So, what was the problem?

My old process involved a lot of back and forth between different applications. I couldn’t tweak my colors and see the impact on accessibility in real time. Instead, I had to copy/paste HEX codes from one app into another. Then when I was ready to start development, I had to…