How to Increase Contrast for Accessibility While Staying On-Brand

Simple tips and tricks to creating higher contrast within your brand color palette.
How to Increase Contrast for Accessibility While Staying On-Brand

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:

  1. Increasing the saturation and/or the shade of the text color
  2. Decreasing the saturation and increasing the tint of the background color

Done together, looks like this:

Darken and saturate foreground elements to increase contrast with light background colors.

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.

UI design expertise on tap

Become a better designer in 10 minutes a day. Professional, bite-size design expertise delivered to your inbox.

The UI Lab

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to The UI Lab.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.