Engage More of Your Audience – Designing for Color Blindness

A great deal of our advertising comes in the form of what we see or read – from magazine ads and websites to billboards along the highway and video walls at trade shows. And there is no doubt that creating something that is visually appealing can have great impact and potential sales conversions.

But what many businesses fail to realize is that they are often leaving out a noticeable part of the population when they don’t create inclusive designs: content and images that take diverse needs and variations in capability into account.

A great example of non-inclusive designs, which many businesses are guilty of, is failing to consider color blindness when designing content and images for their website, trade show displays, and any other marketing materials.

Designing for Inclusion

Understanding Color Blindness

When you design for inclusion, you are making an effort to create and present information in a way that allows absolutely as many people as possible to benefit from your content, products, and services. Color blindness is more common than you might think. According to color-blindness.com, roughly 8% of men and 0.5% of women are affected with the most common type of color blindness. This means that if you rely on certain colors for impact or to highlight important aspects of your message, and if 1000 men walk by to look at your digital display, at least 80 men will not be able to get the message you intended.

Color blindness is really a color vision deficiency which makes it impossible to differentiate colors accurately; it is not a literal colorblindness. Literal color blindness, or a complete inability to see color, would be monochromatic vision.

There are several types:

• protanomaly is a reduced sensitivity to red light
• deutreanomaly is a reduced sensitivity to green light (most common)
• tritanomaly is a reduced sensitivity to blue light (extremely rare)

So when someone has a reduced sensitivity to green light (deutreanomal), they have trouble distinguishing between red and green:

Designing with Color Blindness in Mind

One of the biggest mistakes, which is fairly simple to avoid, comes into play when you are going to have something that requires a slight difference, such as with a hover effect. The important thing is to not just add a slight color shift – like going from dark brown to dark blue.

According to 99Designs.com, the following color combinations are very hard to distinguish between and should be avoided:

• green and red
• green and brown
• blue and purple
• green and blue
• light green and yellow
• blue and grey
• green and grey
• green and black

Colorblind individuals are able to perceive shifts in brightness, so going from a really dark color to a really light color makes the change easier to see. Even better would be to also add an additional visual difference such as a pattern or texture, shadow, or border, or anything that acts as a visual cue other than the color change.

Key Places for Inclusive Designs at Events

Whether you’re creating an event and planning on having high-impact digital signage or you’re scheduled to attend an event and have a booth on the exhibition floor, all of your designs should be color blind inclusive. This includes any content and images you are going to have displayed on devices such as iPads and laptops, as well as content you design for handouts.

That being said, there are certain event elements which are key. For instance, maps. Maps, all too often, rely heavily on color, and if done poorly, they can be so confusing to a color blind user that they become useless as a helpful aid. You can alleviate this issue by using varied icons or shapes in addition to color. So make sure key elements that attendees will need to rely on for vital information can be easily interpreted by all.

Gamification is catching on as an online marketing technique at events as a way to create engagement. Many typical gaming elements rely on color to distinguish different aspects, such as being able to tell one team from another. This can render the “game” unusable for someone who is colorblind. Again, with a little forethought, this can be avoided. For example, if a user has to select a color as part of the game, you could simply have the name of the color in text as well as displaying the color.

To help you create inclusive designs for your event, or your website, here are some useful tools:

• ColorBlindAwareness.org – if you’d like to experience the world of color as it would look to someone with a specific type of color blindness, go to http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
• See how colors work together – this tool allows you to view a simulation of the 216-color palette as perceived by someone with a specific type of color blindness.
• Colorblind Web Page Filter – this tool is still under development, but if you want to see what your website looks like through the eyes of someone with a particular type of color blindness, go to http://colorfilter.wickline.org/. You can put in the url and select the color filter you’d like to view the page through.
• Color Oracle– this is a free color blindness simulator download, which will show you in real time what your design will look like for people with common color vision impairments.

The bottom line is that to be color blind inclusive, you should never use color alone as a way to highlight information, portray key elements, or to engage a user at an event, or on your website.

article resources

1. http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
2. http://webdesign.tutsplus.com/articles/designing-for-and-as-a-color-blind-person–webdesign-3408
3. http://dux.typepad.com/dux/2013/04/designing-with-the-color-blind-in-mind-part-2.html