Design for everyone: Color & Contrast

By Maria Arango Kure
January 20, 2021
Close up of a brush with red paint over a white paper

When starting up a business one of the very first things that we start considering is our branding. We think up a name for our product or service, we design a logo that represents our business, we pick our brand colors and move on to snazzy websites and apps and business cards and merch.

Back in the day when I first started school, full color printing was pretty expensive, and in the time before Facebook (yes I know, I’m ancient… moving on) digital only design wouldn’t cut it at all. I remember one of my professors repeating over and over, “If your logo design doesn’t work in just black ink, it’s useless”.

Nowadays full color laser printing is ubiquitous,  and designing for screens is the bread and butter for every designer. We use beautiful gradients and halftones, incredibly precise hex codes that give us any possible color combination imaginable and hi resolution monitors give us images that appear more vivid than the real world objects in front of us.

How easy would it be to think that my old professor’s words are irrelevant today, just an artifact of older times where things were completely different. And yet they still hold true; not because sometimes we will have to choose to print design in one ink only to save up on some money (which in some situations, it’s totally still the case), but because we if we rely solely on color to be the only affordance for our design, we are failing to communicate with a significant portion of our audience.

Color is a powerful tool that affords seemingly endless design possibilities, but far too many of us design with only one type of color vision in mind—our own.

Geri Coady, Color Accessibility Workflows

If you read my previous post you will know why I think it’s important to consider all these different types of color visions in our design process, and to do so very early on. We have the ability and the responsibility to make the things we create have, not only a bare minimum of usability, but to be inclusive too and give our whole audience the same enjoyable experience regardless of their ability. To paraphrase Geri Coady, we have the obligation to give all our readers the respect they deserve.

No sacrifices needed

For those of you who’ve already started feeling sorry for yourselves thinking how drab and boring accessibility is, and how in order to accommodate the needs of some people you’re going to have to sacrifice the color and beauty of your design, let me give you three thoughts that might flip the switch on this line of thinking:

  1. Good design is usable design: If what you create can’t be read or understood by your audience, you have failed your task, no matter how beautiful it looks.
  2. Accessible and usable design is beautiful: it is not harder to design beautiful, accessible products and interfaces, you just need to know what is expected and work within those parameters. We’ve all learned color theory and grids, this is just one more set of best practices.
  3. Accessibility is for everyone: don’t think you are designing to accommodate the needs of “some people” you are designing a robust visual system that every person can access, even if they’re outside on a sunny day, even if their screen at work is terrible, even if they have a visual disability.

All this to say, it’s not an either or. You can produce beautiful and well design content that suits everyone’s needs, and here are two ways you can do it.

Color as meaning

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. Considering different types of color vision doesn’t mean you don’t use color to convey meaning, it is a fantastic tool to do so, it just means you know better than to use color as the only tool to convey meaning the meaning or the affordances of your design.

Forms, charts, buttons and graphs are the most common places where the inattentive designer can forget that they way they perceive color is not universal. When the approximately 5% of people worldwide who have some form of color blindness come to read your chart and see two identical lines moving in opposite directions, or a whole pie where every piece looks exactly the same, they won’t stick around to figure out what you’re trying to say to them. If I cant tell which of the fields in your checkout form has an error, I’ll probably just leave the shopping cart and go someplace else.

But here’s the good news, adding text, texture or shapes is easy, free and doesn’t significantly alter your design in any other way, as described by these images from Jonas Jared Jacek’s article on the WCAG and web accessibility (Opens in a new tab).

example of an inaccessible form with fields for first name, last name, email and password showing side by side the colors as seen by someone without and with color blindness

Inaccessible form example Author: Jonas Jared Jacek · License: CC BY-NC-ND 4.0

 

example of an accessible form with fields for first name, last name, email and password showing side by side the colors as seen by someone without and with color blindness

Accessible form example Author: Jonas Jared Jacek · License: CC BY-NC-ND 4.0

 

Contrast

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.

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.

10th GAAD: Awareness Matters

10th GAAD: Awareness Matters

Today is Global Accessibility Awareness Day. If you are reading this post, chances are you knew that, or at least you have some idea what it might be about. And if you're reading this post, chances are you know me and know I've been on a bit of a roll with...

read more
The Way We Are: Cognitive Biases

The Way We Are: Cognitive Biases

“We do not see things as they are, we see them as we are.” Anaïs Nin, 1961 Do you know where your opinions and beliefs come from? We all like to think they are the result of our experiences and objective analysis of information we collect throughout our lives. But in...

read more
Why Accessibility?

Why Accessibility?

Talking about web accessibility can be a bit of a thorny subject when you are starting up a business, developing a brand and building a website. In my time working with developers, entrepreneurs and established businesses I have come across many different responses to...

read more

you're currently offline