Confessions of a Designer/Developer: Color-Blindness & How I overcame the Odds
Hi, my name is Casey Baggz and I’m a color-blind designer…ish. I’m actually a software developer, but I originally went to school for Graphic Design which has sent me on a journey to becoming a developer. Basically, I’m a “creative developer”. I don’t know man, it’s complicated! I do all the things…
Let me ask you a question: “What do you know about color-blindness”? I’ll tell you that people generally don’t know that much. As a matter of fact, it’s such a vague topic that many people don’t know what it actually means and think all color-blind people see in black and white (false). I was recently listening to one of my favorite podcasts “Stuff You Should Know” and they released an episode on color-blindness (CB) which was very educating and it made me realize — “I haven’t really talked about this to anyone in the industry…”. Why is that? Was I afraid, embarrassed maybe? Was I scared that I would lose the one thing I loved doing (creating products that help make peoples lives easier)? What was driving me to keep my CB a secret?
I think it’s time to take a deep dive and talk about the struggles I’ve faced in my life along with how we can build better UX (whether digital or not) for our products.
Chapter 1: Me vs. Myself
It’s the 80’s and I’m sitting in the back seat of a van with my cousin as the sun’s warmth touches my back like a soft flirty touch of your true love. We are six years old, entertaining ourselves by yelling out what color things are as we are passengers on a road trip. At this point, I’m unaware that I have a problem seeing colors correctly. My cousin points at a heart button she has on her shirt that is pink. She asks “What color is this?”. I sit and think to myself, “I have no idea what the name associated with that color is? I think it looks like some form of blue…or is it red?” I decide to be transparent and say “I don’t know?”. “You don’t know? This is pink! You can’t tell this is pink?!” my cousin laughs in my face. This will initiate my denial that I see colors differently than other people.
Fast forward to my early years. I’m finding out I love art and am really good at it. I still don’t know that I will never see the world in its true beauty of experiencing the full-stream of colors that nature has created. I’m in art class and we are painting with acrylics. I’m trying to create a complex color for an abstract piece we are making, but something just isn’t right? No matter what colors I choose to mix, I’m not getting the hue I envision? Why? I give up and just go with the flow and use the colors I have. It may look weird but it’s art and art doesn’t need to make sense, it just needs to create an emotional connection.
I’m now in my mid-teens, still banging on that #artlife and excelling at it. However, I still can’t seem to grasp how to mix colors properly — but, I’m losing interest since I’m really digging contemporary artists like Pollock where I don’t need to mix complex colors. I’ve been studying for my driver's test and am ready to go in. In the back of my mind, I start to panic as I fear for the one test I think I might fail — the color test. I’ve been doing well with my permit, but the lights sometimes are hard to tell the colors between red & green (keep in mind, this was pre-LED). I approach the bench to the sweet lady who tells me to look down into eye mask for the eye exam. I’m flustered. “Oh, no. This is it…I’m never going to get my license.” My face had to be cherry red at this point. “Name the colors you see in order.”. Are you kidding me?! I think — the faded slides don’t do me any favors. I look and I cannot tell the difference between the red and green. “What colors do you see, dear?”. Nervously I spat out “Red, yellow, green, yellow.” “Great! How about the next line?”. “Are you serious? I got that?” I think. “OK, let’s try this again.“. I announce “Green, yellow, yellow, red.” The lady looks at me with suspicion. “Uh, oh…this is it. I’m done for.” I retire my thoughts. “Try again…” she says then winks. OMG, it’s a miracle! Well, I have a 50/50 chance to right this wrong. “Green, yellow, yellow, green”. “That’s right! Thanks dear”. And, thus, more than likely due to the ignorance of knowing what CB is, I continue in life…clueless.
It’s early college and, of course, I am attending an art school. I’m one of the top performers in each class but I’ve really taken a liking to Typography and Portraits. By this time, I know something is up. I have figured out that I’m not like the other kids who create beautiful palettes in their work. I just mask it by staying monochromatic, even down to my choice of clothes (still wearing that black shirt with black or grey jeans combo). I’m in my most hated class…color theory. Our final project is a scale of colors that show all the tints, tones, and hues for a specific color given. Mine is green. I feel that I did pretty well, but when I turn in the project the professor looks at me and down at the paper. In a very condescending tone, she says “What is this?”. Confused, I reply “…my project.” The next words she would choose to say would haunt me for about 10 years after.
“Casey, do you actually think these colors are right? You are color-blind if you do which means you will never make it in this industry. I’m sorry, but you’re not…”
She follows up that inspirational comment with “I’ll give you a C, but you should fail this test.” There’s a lot to unpack in that single statement, so we’ll just move on for the sake of time (by the way, that was the only “C” I made in art school). By this time, it’s more than obvious that something is wrong. My intuition is, in fact, screaming to me that I need to address this. I still choose to stay in denial hoping that I will be able to do what I love for a living one day.
It’s now post-college and I’m starting my early adult life. Myspace is the new thing and is where I start my first coding adventures. My friend at the time is destined to prove I am color-blind and finds a test for me to take online. Destined to prove to them that I am not color-blind, I agree. I start the test and see the numbers fine. “Really?!” I think, “this is a joke…”. My confidence is quickly deflated when I get to the 5th circle of colored circles. “There is no number in this one?” I say. They respond, “Yes, there is…”. My heart sinks and is brought down to reality. I am officially color-blind.
All these years, all the denial of thinking I just “confused the names of colors”. All the art palettes that I could never achieve perfection. All the signals that were given by blunt people who decided to dote me with criticism about how I interact with colors, everyone, …everything was right. I am different…and alone.
Chapter 2: Life as a Protanopia n00b
I had 2 choices as a response to this. I could either continue to live in denial and pretend I wasn’t CB, or embrace the truth and learn to live without fear of it ruining my career plan. I chose the latter because more so than not, I’ve figured out that I’m a fighter when it comes to fight or flight. This wasn’t an instantaneous change. I would still hide the fact that I was CB for the next 15 years. The difference between these years and the past is I knew that I was CB vs. previously being ignorant to the fact.
These were the most important years as I would enter my design career and slowly evolve into a software developer. How did I achieve this being CB though? Never having a day where I didn’t remember my color theory professors prophetic words of guaranteed failure, I learned to hack the system. As an art director, I would use images to source a color palette or use a previously created palette built into tools in Adobe products. This got me far as a designer, but there were still times I would get “caught” with sketchy colors being used.
My transitioning into a developer made things easier as I was no longer in charge of creating color palettes but just consuming them from art files. Thus, I would memorize and rely on the hex-codes to get me where I needed in being successful. This was, of course, foolproof since it’s data-driven. It wasn’t until around 2015 things changed and the topic of accessibility started to become a hot topic with the web. I quickly learned that being CB was to my advantage as I could help teams discern between using colors that would interpret across both non-CB & CB users alike in order to make sure they were communicating the right message. For example, depending on what green you use for your “success” color, might actually look red or even yellow to someone who has extreme Protanopia (like me). Additionally, your yellows might look green or orange.
When I realized this I chose to take a leap of faith and announce to the current team I was on about my vision deficiency. I remember my heart pounding and getting short of breath hoping it wouldn’t jeopardize all my creative input as I still loved working very closely with the design team. As I prepared to receive the response to my confession, what would come next was something I least expected…
“OMG you are?! That is great! This gives us a huge advantage in our designs!”
Alas, I am important and can continue to do what I love on a greater scale. Not only can I contribute to companies by delivering top-notch products, but I can also give input that most of the world cannot. It was an absolute miracle.
Chapter 3: How we can build better products by thinking of the CB
Throughout my life, I can point out great UX patterns for both digital and non-digital products alike that have taken people with CB into account. Let’s check out who those are (in no particular order).
The Do’s
1. Crayola
Obviously, as a maker of color drawing items for children, you need to be on top of it when it comes to thinking of people with CB. By doing something as simple as including the name of the color on the wrapper, they have allowed people who cannot discern certain colors to know they are grabbing the correct one. Without this small feature, I would have never been able to successfully select red, green, blue, or purple.
2. Microsoft Xbox
Anyone that knows me, has heard my dissatisfaction for most all Microsoft products. Yet, I can truly say that Xbox (and VS-Code) have killed it regarding great UX for the CB. The Xbox was the first console that I’ve used (p.s. I’m not a gamer) that used an almost white cool tone color for its power indicator vs a dark tone like red, etc. Likewise, for the controller, the follow the same pattern and use a dark LED red when it needs charging but changes to the cool tone when it’s fully charged.
3. Apple success/danger tones
Now into software, Apple was one of the first companies to have pure discernable colors for their “success/warning/danger” combo. While looking elegant, it was and is easy to discern the colors from each other and not mix them up. Google does the same with their material palette.
The Don’ts
Now that we have taken a high-level look at great UX for the CB through from non-digital to digital products alike, let’s talk about the companies who need to change their products in order to accommodate people with CB.
1. AT&T
This one honestly baffles me. AT&T’s primary brand color is blue, why wouldn’t you use that for the success lighting on your products? — I have no idea. 🤔 Thus, their hardware uses an indiscernible red/green LED lights for the CB. Having been a customer with them, I cannot tell you how frustrating it is to have a tech support agent get mad at YOU (really? Yes. So much yes…) because you can’t tell them which color the lights are on your router.
Agent: “What color is the light on the router?
Me: “Uhhhh, I honestly can’t tell. I think it’s red?”
Agent: (in a frustrating tone) “Sir, it’s either red or green and if you can’t tell me what color it is, I can’t help you.”
Me: “I’m red/green color blind so I don’t know what you want me to do?”
Agent: (continued frustrated tone) “I’m sorry sir, but it’s either going to be red or green, just guess!”
I mean, I can’t even with that conversation right now, but let’s figure out what AT&T can do to fix this solution. One simple way is to follow the Microsoft pattern and use a blue/red success/error state. Simple fix! I do admit this does seem a little obvious when blue is your brand color…
2. LG Dishwashers
Current LG products are doing great with accommodating the CB. As a matter of fact, the HG washers use both a cool tone for the power and red tones for choosing a configuration. But, let’s talk about their dishwashers. We have an older model that only uses red which is of course not ideal, but let’s not judge someone by their past. On one of their current models (pictured below), it looks like they have even less contrast than the older models. However, this may be due to photoshop magic, but it’s still important to discuss.
Another easy fix is to have better LED lights with a darker back panel and use blue tones for power/success related items and a pure red for error related statuses.
3. Apple Sleep graph (Health App)
Now this one is really odd to me. Out of all the years I have used Apple products (iPods, iPhones, MacBooks, …even the ol’ Powerbook) I have never had a problem with the colors they have chosen to use until now. In the Health app, there is a category for sleep monitoring. It has a clean design and displays a graph that monitors your sleep or rest cycles. Unfortunately, for the first time ever, I cannot tell the difference between the colors they use to differentiate the two. Due to this, I just assume I sleep and have no rest periods. In the image below, there might be only one color in the app (I cannot tell), but the 2 colors from the legend (rest and sleep) look the exact same to me causing it to be a failure to the CB (at least protonopians).
4. Bootstrap built-in theme colors
Bootstrap still claims to be “the most popular library in the world”, but I just don’t believe that anymore. Maybe pre-React era, but surely not now? Anyways, one thing that has always bugged me was that the built-in theme success color has always looked orange (is it?).
A great solution would be to use more vibrant colors along with making the hues purer. For example, in the image below, the “success” color looks orange to me? Is it? Maybe not to the normal eye, but to CB people with Protanopia, more than likely. The most important thing to remember is — orange has both red and yellow in it, which makes the color more confusing to people with Protanopia. Let’s try not using a completely warm-toned palette for all the success, warning, danger colors.
Conclusion: Remember the visually impaired
I know this is approaching color-blindness from a very high-level and is only sided from a person who is labeled with “extreme protanopia”, but I could sincerely write an entire book about how CB affects UX and how we as an industry can become better at it. The key takeaway I would love everyone who comes across this article is to build products (whether digital or not) with intentionality to accommodate the visually impaired. By doing so, not only will our products become better and more usable, but we can communicate the meanings used with everyone without the stress of not understanding what is trying to be said or mean due to bad color choices.
Let’s work together!
If you are a product company (whether digital or not) and want to put your products to the test, I do CB consulting and would love to help bring your products to the next level and become reachable and readable to everyone. If this is you, feel free to contact me from my site or leave a comment/message me through the Medium platform. If all else fails, Twitter DM is also open for communication.
Resources
Since I’ve been writing this blog, the topic of CB has become somewhat of a hot topic. Below are some resources to help you better understand what being a person with CB means (no, we do not all see in black and white):
- Stuff you should know: What is colorblindness?
- Invision Blog: Color accessibility product design
- EyeQue Color blind test
- Enchroma CB sunglasses (not an endorsement, but I’ll take it???)
