A laptop displaying the screen of the accessible color combinations website with my branding colors in it

When building your brand and choosing your brand colors, considering accessibility might strike you as a limit to your creativity, but the fact of the matter is that you can have your cake and eat it too. You can have a beautiful color story, you can stick to your brand identity, you can be green and yellow and blue and any color you can think of.

Contrast is one of the biggest issues when it comes to color and accessibility. Having adequate contrast will make your designs legible for users with disabilities and users without them alike. If you’ve ever tried to read a website on your phone in broad daylight you probably know the struggles of low contrast text.

Luckily, contrast is one of those concepts we’ve all heard about, and even luckier it’s something that is easy to measure and a simple check of the contrast ratio will let you know if your design will be readable if people are outside checking it out on a phone screen on a sunny day, if they have 20/40 vision – which is very common in all people as we get older – or if they have a form of color blindness.

The WCAG, is the set of accessibility guidelines that establishes best practices for accessibility and they tell us that the bare minimum of contrast our design should have is 3:1, a good one is 4.5:1 and the ultimate goal to strive for is 7:1. The recommendations include different minimum ratios depending on the size of your text, smaller text will need more contrast to be legible than bigger text.

To sum up, the best rule of thumb is to give all of your text a contrast ratio of at least 3:1 (and, ideally, 4.5:1 or greater) to make it accessible to people with vision impairments, as well as make it more readable for everybody.

Your new best friends

If you’re wondering how would you ever even know whether your color choices are accessible or not, especially if you don’t have one of the various forms of color blindness, there are a number of tools of the trade that come to the rescue:

  • Software like Photoshop and Illustrator have color blindness filters that let you have a look at your design and figure out if it still conveys the meaning you originally intended.
  • Online contrast tools like Contrast Checker.com, and WebAIM. 
  • Safe color finders like Color Safe can help you start your visual brand identity with accessible palettes.
  • Overall accessibility tools like WAVE can help you get started with the many accessibility checks.

When choosing my own brand colors and the color palettes for my clients, I use the accessible color matrix as a way to see how my colors interact with one another and which applications and combinations I can use.

a color matrix showcasing the color contrast between Maria's brand colors

Thanks to this matrix I can know to stick to white text over or as a background for my berry, emerald and aubergine colors and that my chartreuse color only has sufficient contrast when paired with the dark shades, never with white. This allows me to design collateral where the contrast is always high enough for comfortable reading, with black text on white, white text on black and having accent colors to go with either.

Just remember, no automated resource can do better than you and your common sense, so use them wisely.

0 Comments

Latest Posts

Some more of my thoughts.

If you liked this post, you might want to have a look at some others.

Queer by Design: The rainbow flag

Queer by Design: The rainbow flag

This post was originally published in June 2020, in the limited print magazine OFF centre, created in collaboration with Linda Hammarstrand and Viktorija Bernatavičiūtė. Queer /kwir/ adjective 1. Strange; odd. 2. Denoting or relating to a sexual or gender identity...

read more