The team at Stripe explores how they’re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app for figuring out the ideal range of colors that they needed.
We built a web interface to allow us to visualize and manipulate our color system using perceptually uniform color models. The tool gave us an immediate feedback loop while we were iterating on our colors—we could see the effect of every change.
This tool is…whoa! I would love to learn a bit more about why they built this though as it looks like it wouldn’t have been a particularly quick and easy thing to put together. I wonder if that team has to support a wide-range of colors for their charts or data-visualization UI (as complex charts can often require a much larger range of colors for comparing bits of data effectively). Either way, this is pretty inspiring work.
This somewhat harkens to a couple of techniques for enforcing accessible colors, including one that uses custom properties with calc()
and rgb
by Josh Bader, and another by Facundo Corradini that also uses custom properties but with hsl
with conditional statements.
Can we find the hex code of what
blue-100
is or whatred-500
is etc ? ie, you have one base colour and then others are named100 to 900
, like that. Thanks.Sadly, they didn’t apparently apply this to their blog. The site has 101 “very low contrast” warnings when I run Wave on the page :(
that’s great and all but their colours are not at all true to their stated branding, having been wrung through this process. for example I dare you to tell me with a straight face that their final “yellow” is really yellow.