Close up of a brush with red paint over a white paper

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 color combination imaginable and high 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 artefact of older times when 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 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

Color as meaning

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 the 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.

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

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).

Living with a partner with color blindness has made it very easy for me to consider different color visions when designing interfaces. It’s very easy to ask for his help with usability testing and see where he has trouble and where how he would prefer to experience a design. But there are a number of other tools like the A11y color blindness empathy extension for chrome,(Opens in a new tab) which lets me see my design as it is seen by people with different color visions to mine, and see if the design still makes sense when the meaning of color is removed.

 

Video Description: A screen capture of my homepage in the Brave browser, activating the A11y color blindness empathy extension and going through all the different options to show how the color of my fonts changes every time and how even if the color in my buttons stops being visible, the changes in size help indicate when the button is being hovered and that it is a clickable element.

Another element of websites where often color is used as the sole affordance is button hover states. If the only indication that a person is hovering a button is a slight change of shade, a significant portion of your users will not be able to experience it. You can play with contrast, size and movement to convey the meaning, like I do with my call to action buttons.
My invitation, in sum, is for you to take the challenge of color head on. To consider different types of color vision, meaning and affordances and to take the opportunity to enrich your design and user experience with the use of other tools like size, contrast, shape and movement as elements of meaning.

0 Comments

Submit a Comment

Your email address will not be published.

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