What my color-blindness taught me about design
I lived in China before I was 16. When I was 5, I took a drawing class at my kindergarten. My teacher asked us to draw a rooster and paint it with colors. I tried my best. I painted the sky with blue, the grass with green, and the rooster with my favorite colors. I handed my drawing to the teacher thinking I was going to get a good grade. But no, I received the lowest grade in the class. From then, I kept receiving bad grades on the drawing class. The teacher wanted us to use bright colors and I kept using dull and depressing colors. I was convinced that I had a bad taste in colors and I was disappointed at myself.
Until I was in middle school, I found I had severe red-green color blindness through a routine eye check because I wasn’t able to tell the numbers on the colored plates. The doctor asked me “what number do you see?” and I replied with a question “oh… there’s a number?” At first, we both thought the other person was joking…
I can tell the difference between green and red most of the time depending on what light I’m under, but I’m pretty sure it’s not the same green and red other people see. The color blindness is typically inherited. After I was diagnosed, my grandpa and uncle from my mom’s side were also diagnosed color blindness (they always were but they didn’t notice). Also, there is no cure for color blindness. This means that I will have to adapt.
In fact, 8% of all men and 0.5% of all women suffer from color blindness. Although 99% of color blind people suffer from red-green color blindness, they don’t agree on the same colors. For example, I suffer from Deuteranomaly, and it is hard for me to tell violet from blue or yellow from light green; others who suffer from Protanomaly may see red, orange, yellow appear greener. (To learn more about different types of color blindness, you’re welcome to read this article: https://nei.nih.gov/health/color_blindness/facts_about)
Empathy is the biggest asset for UX designers
“The main tenet of design thinking is empathy for the people you’re trying to design for.” — David Kelley, Founder of IDEO
Being color blind taught me why empathy is the biggest asset of a UX designer. Two years ago, I took a class called “Fundamentals of Human Behavior” from the University of Michigan. A class assignment was about design for people with color blindness. Because I am color blind, I saw the assignment differently. I saw the pain points and challenges that are beyond just a problem to solve.
Shortly after the class, I was trying to use empathy as a skill in my other projects. I was working with the bus system in Ann Arbor. The Winter was cold. Bus riders were complaining about the bus arriving late all the time. The surface-level issue is that buses delayed more often when it snows. But when I listened more and tried to “be” a bus rider myself, I found the problem was really about the uncertainty waiting at the bus stop. Bus riders were not sure about the status of the buses and they lost patience in cold weather more quickly. They had no one to communicate about the status of the bus and had no control or preparation for this delay. If I think about the issue from my own perspective, the pain points wouldn’t be revealed because I drive all the time.
In most of the cases, designers are not the target audience of the design. Developing an empathy is critical in design. And it is a skill that every designer can practice and grow.
Think about accessibility and physical needs
For every 100 visitors to your website or app, about 5 of them have a very different visual experience of the content. If your audience is male, then about 8 out of 100 are affected. It is not a small number. In fact, it is even higher than the conversation rate for some sites. When we design pages, we want to use the most beautiful color combinations but that doesn’t mean color-blind people should be left behind.
Contrast is critical for readability. However, most of the people with color blindness see a lower contrast than people who don’t suffer from color blindness. My manager used to ask me about color accessibility since I’m color blind. He thought if I thought the contrast was good, it should be good. But color blind people don’t see the same colors. In order to make sure about contrast, Web Content Accessibility Guidelines 2.0 level AA requires a contrast ratio of 4.5 for normal texts (14px — 18px). I personally use a contrast ratio calculator published by Lea Verou to get the contrast right: http://leaverou.github.io/contrast-ratio/. Also, we should avoid some color combinations that are commonly unfriendly to color-blind users such as green/red, purple/blue, and light green/yellow.
Have multiple solutions to solve one problem
One of my biggest challenge everyday as a color blind person is traffic lights. As you know traffic lights rely heavily on colors to convey the message. Actually many color-blind people are not sensitive to the difference between red/yellow lights or green/red lights, but they can learn to respond to the way the traffic signal lights up — the red light is generally on top and green is on the bottom. However, this life hack doesn’t work at night. Because all I can see is a bright light, I am not sure about its position. Especially for red and yellow lights, they are pretty similar in my eyes. It could be dangerous driving on the street without knowing the traffic lights correctly. So what do we do about it?
I posted this question on LinkedIn and received some creative ideas. One of the respondents suggested a bounding box for the light be lit up so people can have more spatial awareness; another respondent suggested that, instead of relying solely on colors, we can use different shapes to convey the message (like the image below).
Those are very creative ideas and they all have potential to solve the problem for color blind people. We often want to solve one problem with one solution, but we need to realize that users are different. Sometimes it involves multiple solutions combined to solve a problem. A very simple example below. The colors alone can convey the message to most of the users, but the icons communicate the message to people with color blindness better.
