This is my fiancé's website, The Gig Gal. It has sort of a strawberry lemonade color scheme. The primary brand color is a salmon pink, and she typically applies it as accent colors throughout the website:
The salmon color works well in larger area. However, when you use the brand color for links at small to normal sizes, the contrast is much too low:
Even though the two are literally the same color, when used in a small format, the brand color will look lighter and results in link text that is difficult to read.
If we run it through a WCAG-compliant contrast checker, we can see that it fails all accessibility standards for normal text:
Not so good! We need to up that contrast, but we need it to still feel like the Gig Gal branding.
So, we can increase the contrast and make links more readable by:
- Increasing the saturation and/or the shade of the text color
- Decreasing the saturation and increasing the tint of the background color
Done together, looks like this:
Now let's try it out. How does it look? Is the link easier to see and read?
Okay, it seems easier to read. On the branding side, we took a small hit: maybe it feels a little less aligned to the brand. (this is just one reason why companies spend millions on rebrands. And most of them aren't as robust as they should be.) Alas, refining your color palette is a much more complex topic, and one that I will address in another article.
For now, we want to use our color picker know-how increase contrast.
So with that in mind: how well does the new link color do according to WCAG guidelines? Using the same WebAIM contrast checker, let's run it through again:
Great success! We found a color that is based on the brand color that fully complies to minimum WCAG accessibility guidelines.
Now that we know the basics of how to use the color picker, let's get acquainted with some hot tips I've picked up.
