Getting an accessible blue
Who knew that picking an accessible blue was going to be so hard?
A major bug at Sprinklr was that our primary brand blue was not passing AA accessibility color contrast in a LOT of areas 😱.
Thus began the many color swatch searches and testing that could pass *most use cases, paired with proper documentation.
*let’s be honest with ourselves, you will never get 100% compliance with blues and grey, so best to aim for 100% of 90%.
what do we have now?
The (old) blue was only passing text WCAG on ONE of the SIX background colors we utilized throughout our 5 product suites. As you can imagine, this was not the ideal situation and this created dozens of WCAG color contrast bugs in engineering.
Competitive analysis
It’s never really quite as “easy” as choosing a new color, that would take all the fun out of it. In parallel in searching for a slightly different, passing color contrast blue, I ran competitive analysis on the application of primary brand colors across major design systems. This process was a bit of a ping pong game of looking at other brand applications against what and were we wanted to apply our brand color.
After generating dozens of slightly different colors blues, I found one that passed on FOUR of the six background colors, which was about as good as it was going to get. With linting rules on the darker colors background paired with design documentation, we could avoid the two background colors that do not meet accessibility quite easily.
Applying the blue across components
Now that we have a blue that passes on more than one background color, how does this look across our core components? I made some conscious color updates to some of our major core components, these updates:
Meet accessibility color contrast standards
Utilizes our brand blue color in a more focused way
Elevates our brand presence
This seemingly simple update (I don’t think I will look at the color blue the same) we were able to close ~80 bugs related to color contrast - instantly. Additionally, ensuring that our colors and interaction states were meeting AA compliance, Sprinklr was able to apply for FEDRamp.