The Traffic Light Flaw

Last summer, my partner and I were driving through a new town. We came to an intersection and he noticed that I wasn’t slowing down. So, as any good passenger in the front seat would say if they saw something that the driver seemed oblivious to, he asked me to slow down. 

I was confused why, but I trusted him and did just that. My eyes rapidly went back and forth to look for a cyclist that may have been in my blind spot, a pedestrian walking by, a squirrel trying to cross the road, whatever it was that I didn’t see for him to tell me to brake. Turns out, he interpreted the traffic light as red based on the placement of the light. 

Instead of the vertical traffic lights we were both accustomed to, the one hanging above the road was horizontal. Because he is red-green color blind, he learned to read traffic lights based on the placement of the lights instead of the color. The top light meant stop, the middle meant slow down and the bottom meant go. In this case, there wasn’t any top or bottom, all the lights were in one straight line which made him question the placement format. 

There’s not one uniformed traffic light. The majority of traffic lights might have red, yellow, and green vertically stacked,  but what happens when it becomes horizontal or when there is inconsistently placed blinking yield arrows?  It causes confusion and you have to rely on other visual cues that may or may not be there. It makes it harder to make better informed split-second decisions that are needed when behind a wheel. For example, if there’s cars flying by in the crossing lane, then that is a visual cue telling you that your lane needs to stop (or that everyone just happens to be speeding through red lights.) You have to readapt to a system that didn’t take you and a whole bunch of others into consideration.

The stop and go traffic light example isn’t the only situation where red and green have been used to depict informational opposites in design. Here are a few other examples: 

• Yes & No 
• Growth & Decline
• Accept & Reject
• Correct & Error
• Safety & Danger
• Create & Delete 
• Negative & Positive 
• True & False

The list goes on and on and on and on and on. I like to call it the traffic light flaw. 

Here’s why the traffic light flaw is important for us as designers to know about. Color blindness affects about 8% of men and about 0.5% of women which equates to about 300 million people. (note: this data reflects sex assigned at birth. There was no data found for non-binary individuals with color deficiencies.) That’s a pretty large amount when it comes to design and inclusivity. To put it into perspective, less people use 8-bit computers for their primary web portal than those who are colorblind in the US. How is that relevant? Well, web designers are still requested to use web-safe colors to be inclusive of a small population that is decreasing as more late-90s technology gets replaced. Technology can be updated but the same can’t be said for color vision deficiencies. This population number will remain the same unless there is some medical breakthrough. (I know, I know, you might be thinking: what about the color blind glasses they have?! The glasses don’t work for everyone and the ones that are compatible with computers and indoor lighting have a lower likelihood of working than the sunglasses.) This is by no means pitting two accessible design needs against each other but instead, used as a reference to show how designers have been creating things with color deficiency inclusivity in mind for decades now.  

So how do color blind people perceive color? To give you an example, according to the color blind awareness website those with moderate form of red-green color blindness will only be able to accurately identify 5 or so colored pencils from a standard box of 24.

I’ve mentioned red-green a lot, but there’s also blue-yellow that shouldn’t be overlooked. Here’s some information pulled from the National Eye Institute if you’re curious about what each one entails. 

Red-green types (most common)

• Deuteranomaly is the most common type of red-green color blindness. It makes green look more red. This type is mild and doesn’t usually get in the way of normal activities.
• Protanomaly makes red look more green and less bright. This type is mild and usually doesn’t get in the way of normal activities.
• Protanopia and deuteranopia both make you unable to tell the difference between red and green at all.

Blue-yellow types (least common)

• Tritanomaly makes it hard to tell the difference between blue and green, and between yellow and red.
• Tritanopia makes you unable to tell the difference between blue and green, purple and red, and yellow and pink. It also makes colors look less bright.

How to create color blind accessible designs 

Now, color is one of the most, if not the MOST, influential surface level visual cues in design. However, as designers we tend to forget to take into consideration a notable amount of the population with color vision deficiencies. This is something I find myself guilty of on a weekly basis. I realize my lack of inclusivity when I excitedly show my partner something I worked on for weeks to have him remind me “hey, this isn’t accessible for people who are color blind.” 

I am writing this blog and list of ways to be more inclusive when using color in design as accountability reminders for myself and for those who are wanting to be more inclusive when designing (so uh, every designer, I hope!)

Incorporate Icons, Symbols & Shapes

Think about how you would design without color. What other visual cues can be given to represent the action you want users to chose from or the information you want them to know? Such as an X for no or a check mark for yes. There are situations where you have to show more than just two options and things will get more complex. Board games and video games are a great example of this and some of them have strategically implemented solutions to help when multiple colors are needed for gameplay. Game designers have used the solution of tying a color to a shape/symbol to be more inclusive for everyone playing at the table. 

Ticket to Ride successfully does this. There are 8 colored cards, each with an accompanying symbol on the card and on the board. This is an added visual cue to help those with color deficiencies without negatively effecting the gameplay. In fact, when I first played this game years ago I thought they were fun flourishes instead of an an intentional, purposeful tool. 

Settlers of Catan, despite the success with the overall gameplay design, isn’t as successful when it comes to color vision deficiency accessibility. You have red, green and brown player pieces (in the expansion pack atleast). With Ticket to Ride, yes, you also have colored player pieces that are difficult to see, but you have city names to help with placement. Whereas the placement in Catan is more complex and changes each game.  I mean, imagine thinking you just completed the longest road, claimed the final 2 victory points to bring you to 10 and then finding out your road was actually broken in half by an opposing player turns ago. 

Not to mention Uno or any game where you need to see red, green, blue and yellow in order to win or even participate.

Use Texture and Patterns 

There are cases where adding an icon or symbol isn’t as subtle as it is in board games and it changes the context of the design. In those situations you can use texture and/or patterns to show differentiation between sections. Imagine having to design a pie chart with one color. How can you relay the information successfully? By adding texture and patterns to each section instead of flat, troublesome colors. “The dotted section shows 30% of____, the striped section shows 20% of_____” and so on. 

Shades Over Hues

Shades are based on light and hues are based on color, which means those with color deficiencies can see the difference in a dark green and a light green just like those with normal color perceptions. The green might not look the same to both groups of people, but there is a clear differentiation between the two. 

So with that, monochromatic palettes are your friend and something to take into consideration when building brands.

Scale and Space

Scale and space aren’t the most reliable options when trying to be inclusive, but they can still help if you are working with brands that can’t swing an expensive rebrand. 

It’s easier to differentiate color when it is large. It’s similar to the poster you read at the eye doctor with all the letters that start off big and get smaller. As the lines decrease in size the letters are harder to make out. If you absolutely have to use troublesome color pairings, your best bet is to use them in large blocks.

It’s easier to differentiate colors if they are closer together. Think of the classic new homeowners trying to decide between eggshell white or creamy white for the living room paint color. If you hold them up individually they look the same, but if you put them side by side you might be able to notice a subtle difference between the two. 

Avoid Troublesome Colors

Remember in kindergarten when we learned how to make colors from other colors? Blue and yellow make green, red and blue make purple, you get it. Take that concept and apply it to color combinations. It’s not just red and green or yellow and blue that people have conflicts with, it's any color that uses those colors in them. Here are a few examples of colors to avoid: 

•  green & red
•  green & brown 
•  blue & purple
•  green & blue
•  light green & yellow
•  blue & grey
•  green & grey
•  dark green & black 
•  pink & tan

Alternative solution #1: Instead of red and green try magenta and green.

Alternative solution #2: Remember, shades help. If you have to use those color pairs, try varying the shade of one. Instead of using a purple and blue with the same brightness, use a dark purple and light blue instead to help with differentiation. 

Tie Color with Context 

Quick! What color is Darth Vader’s light saber? Haven’t watched Star Wars? Still take a guess. 

If you haven’t seen it and still guessed red, you probably know enough about Star Wars to know that Darth Vader is the bad guy. You also probably know enough about color context to know that red is usually the color that depicts something bad/evil.

My partner knew that Darth Vader had a red light saber and that Luke had a green one. But he never actually saw the colors or had anyone explicitly tell him. He always wondered how he knew that and realized it was solely because of contextual knowledge. A red and green light saber laying on the ground lack context, but have once a character claims it as their own it suddenly takes on meaning. 

Now, I usually don’t encourage stereotypes when it comes to other design visuals! But if there are ways you can play into color stereotypes and symbolism, your audience can usually guess or assume the colors you are trying to depict and the purpose for choosing them.

Do User Testing 

The most reliable way to find out if something is color blind friendly is to test it with that audience. You can read through all the accessibility articles and follow all the steps to make damn sure whatever you may be creating is accessible, but when it comes down to it there’s no way to guarantee it’s color blind friendly if you don’t test it with people who are actually color blind. 

Now for the tricky part. You’re all on board for creating more accessible designs but how do you convince your client to go with inclusive color options for their brand, product and marketing materials? 

Designers, I know how it goes. A large part of our job entails us convincing clients why and how we landed on the visual choices we did. Throughout my short years in the professional design world, I’ve noticed that color is a hot, opinionated topic. I’ve also noticed that it’s hard to argue with data. Those of us in the advertising world know that data and statistics play a huge role in choices made both from the creator and the user. 

 Reinforce their target audience

Have an understanding of their audience and the effect implementing/ignoring color blind friendly solutions can have. For example, if your client’s primary audience is male, then then they are neglecting the needs of in 1 in 12 potential buyers/users if they don’t address color accessibility. 

Show examples

Those board game photo examples are pretty eye opening and help you understand how people see the world differently than you. Showing visuals is a great way to take a step back and revisit the first step of the design thinking process: empathy. 

Coblis is a resource to use where you can upload an image and have it simulate different types of color vision deficiencies. Silktide also has a google chrome extension that allows you to vision disabilities including color deficiencies on websites. These tools allow you and your client to see gaps in their brand visuals and that there is an added complexity when trying to navigate information. 

Accessible design is becoming less of a “cool thing to have” and more of an expected thing to have.

Accessibility is taking off and becoming a larger priority in design (about damn time). Users expectations are higher when going to a website and being able to navigate it with any disabilities they may have. It’s no longer a dealing with it situation, it's a “well this website isn’t built for me to use compared to [insert their competitors name here], so I’m just going to shop there instead.” A prime example of this are online clothing stores that show color options but don’t indicate a color name and in-person stores that don’t include a color indicator on the tag. My partner was so excited about finding red pants one day, only to find out later that they were brown because they weren’t labeled. He returned them, hasn’t purchased from them since to avoid frustration and found a competitor brand that is more accessible for him.

Building Brand Affinity 

According to Nielsen, 92% of consumers believe recommendations from friends and family over all forms of advertising. So, if word of mouth marketing (WOMM) and brand affinity are something your client prioritizes, then they will want to consider switching things up to become more accessible if they haven’t already. Your client can have the coolest product in the whole wide world that solves problems users are facing, however, by not being inclusive you are adding in a layer of confusion and frustration when someone is trying to use your product/service. 

The more instances of frustration the less likely they are to purchase, use or recommend to a friend. If anything, they will go out of their way to tell other people they know with color blindness that it was frustrating to use and not worth the time. Data from Forbes says that it takes roughly 40 positive customer experiences to undo the damage of a single negative review. 

On the other side, if you are inclusive, people are going to notice and appreciate your brand even more for including them which helps build brand affinity. You take away that layer of user frustration and make their lives a little easier. For example, apps that include a color blind friendly mode that actually work well such as Robinhood. My partner instantly tells his brothers and friends he has that are also colorblind when he finds a product that is inclusive for him. And they all end up downloading it and becoming brand advocates for that said product/service and telling people they know. It’s a WOMM chain reaction. 

Special shoutout to Daniel Damschen (@damschend, damschend@gmail.com) for his time, help and expertise in this area.