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