Earlier today I came across a great color tool. It lets you add your own palette and then see which combinations will meet accessibility guidelines.
Color tint stacks are one of the things that Nathan Curtis recommends as a reusable component for a design system. He also recommends adding information about the accessibility of specific color combinations.
That’s all great, but how do you get there in the first place?
This tool is a nice start. You can add the colors you are thinking about using in your design and see how they stack up.
As a quick thought experiment I just grabbed the first page I came across on TechCrunch.
It was for a website called Lofree.co that sells a mechanical computer keyboard with round keys.
Here is what it looks like:
We can already take an educated guess that the white text over the gray hero image is going to be difficult to read. But lets take a look at how the other color combinations faired.
I just used Sip to grab the colors and add them to the Accessible Color Palette Builder.
Here are the results:
For realtime fun just click “Edit Palette” then click on a color hex code. A color picker with sliders will pop up.
At first glance it appears that the black that they are using for their text might have been a better choice for their green buttons.
By experimenting with these colors in real time you can see what combinations and changes increase the readability and bring them into current accessibility standards.
Communicating colors clearly, tint stacks, and color accessibility testing are just some of the tools of Design Systems Engineering. They help you make better decisions up front allowing you to quickly communicate and implement those changes platform wide.
