<p>Published on <a href="https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Sara Novak <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tyRnhJI_0_djXuPHoKeFTg.jpeg"></p>
<p>Empathy. It’s the latest buzzword circling around the industry as more and more companies strive to improve their customer experiences. At first, being empathetic seems easy, but often the voices of business stakeholders, industry experts, and the latest data can overwhelm and distract you from developing empathy for the end user.</p>
<blockquote><p>As an experience designers, we must continually practice putting the needs and desires of others above our own as we plan and architect experiences.</p></blockquote>
<p>In light of this, I decided to partake in an empathy experiment and learn what it’s like to be in someone else’s shoes, specifically, my colleague Peter’s.</p>
<h3>Empathy Requires Understanding</h3>
<p>Our Director, Digital Strategist, Peter Bender, is colorblind. To be exact, he is deuteranomalous. Deuteranomaly is the most common type of colorblindness, <a href="http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/">affecting 5% of men</a>. Basically, it means he is “green weak” and has a hard time differentiating greens from other colors. The golden rule in our office is to never color code emails or spreadsheets with red and green because Peter can’t see the difference.</p>
<p>I admit I had to be told several times before I committed this rule to memory. Although I was sympathetic to Peter’s situation, I didn’t really understand his situation enough to be empathetic. What’s the difference between sympathy and empathy? This animated short of Dr. Brené Brown’s explanation is extremely helpful in providing insight.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F1Evwgu369Jw%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1Evwgu369Jw&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F1Evwgu369Jw%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/2bef58078d19681480b34e2a608c3348/href">https://medium.com/media/2bef58078d19681480b34e2a608c3348/href</a></iframe></p>
<p>To better understand Peter’s situation, I agreed to experience for myself what it’s like to be “colorblind” for three days by using the Chrome extension <a href="https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn?hl=en">See</a>, which lets you view the web as users with various visual impairments would. Using the deuteranomaly setting on my desktop, laptop, and phone, I was able to view the web as Peter does.</p>
<h3>Seeing Is Believing</h3>
<p>Going into this experiment, all I knew was that red and green look similar to Peter, and previously I hadn’t thought much more about it. But what does that really mean?</p>
<blockquote><p>Does green look like red? <br />Are all trees red to him? <br />If that’s the case, how can he tell when the trees change color in the fall? <br />Or does red look like green? <br />Do all warning labels look like eco-friendly labels?</p></blockquote>
<p>Once I flipped the switch and saw the internet as Peter does, I realized it’s not that he sees red as green or green as red. He actually doesn’t see either as a distinct color. They are both brown. And purple is blue with some brown, and orange is yellow with a little bit of brown. So basically, Peter’s visual palette of colors only consists of different shades of blue, yellow, and brown.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/420/0*oXLOsbxHQxQ2srtB.">Left: How a person with normal vision sees a standard color picker. Right: How a deuteranolalous person sees the same color picker.</p>
<p>I was incredibly surprised at just how differently everything looks to Peter. After only a couple hours I went to Peter and exclaimed,</p>
<blockquote><p>“Your world is so dull! Your palette is really limited.”</p></blockquote>
<p>To which he replied,</p>
<blockquote><p>“I don’t know any different. I don’t know what I’m missing.”</p></blockquote>
<p>Though I could see sites as Peter sees them, I realized I would never be able to perceive them as he does. I have 30+ years of experience seeing the full spectrum of colors, so I can’t erase them to make my mental perception fully match his. Interestingly enough though, he still associates red with danger and anxiety and green with calmness and nature even though they appear similarly to him. He has learned the same color associations and can speak the same language of colors the majority of people do even though he experiences them very differently than most people.</p>
<h3>The Struggle</h3>
<p>Once I got over my initial bewilderment and began to go about my work day, I very quickly realized that I had to change many of my everyday habits, patterns, and settings to accommodate my new visual limitation.</p>
<p>I typically color code everything, especially my email responses. When I respond to a series of questions, I often add my response below each question in a new color. I may even provide answers in one color and then additional questions in another. Often others will then respond and continue the color system, calling out what specific color their responses are in. When I tried to do this during my colorblind experiment, emails began to just look like brown army-camo patterns and were difficult to decipher. By the end of the first day, I was bolding and italicizing my notes instead, now understanding why Peter bolds important info in his email instead of using color.</p>
<p>The other key system I had to change was how I flag my emails based on importance or required actions using the colored stars in gmail. This system quickly failed me: Google’s six chosen colors don’t have enough variance, so they appear as three very similar yellows, two indecipherable blues, and one dark brown. Luckily they also offer an option with colors AND symbols. Now I know why.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/318/0*0MRl_JyvoQrPPUBP.">The “stars” options in Gmail for person with normal vision.<img alt="" src="https://cdn-images-1.medium.com/max/319/0*2qBvFxnKjIHkRGN6.">The “stars” options in Gmail for a deuteranomalous person.</p>
<p>Finally, my most consistent frustration was due to the fact that I am a horrible typist. I depend on in-line spellcheck in Chrome, Gmail, Word, and more to flag my typos. Unfortunately, the red underline they use appeared as a brown that didn’t stand out to me as prominently as the red normally does, and I had to be much more vigilant as I typed.</p>
<h3>Design Rules for Visual Accessibility</h3>
<p>During this exercise, though I had to adjust my habits and settings as mentioned above, I hit a few situations where I was at a loss and had no way to overcome my limitation. In these cases, the experience failed my basic accessibility needs. However, all of these situations could have been avoided if their creators had followed two key rules.</p>
<h4>Rule 1: Contrast Is Key</h4>
<p>While online shopping, twice I came across big billboards on major e-commerce sites that looked almost blank to me or were definitely missing something. In both instances, red type was used on a neutral mid-tone background. To me it looked like medium-brown type on a medium-grey background. The designers had depended on the vibrancy of the red, which I could not see, to make the billboard legible. To accommodate the range of colorblindness that exists, as well as other visual impairments that dull vibrancy and contrast, <strong>designers must ensure that the colors they choose for copy and the background it sits on have an adequate level of contrast.</strong></p>
<p>The W3C’s Website Content Accessibility Guidelines (WCAG) have set specific color contrast ratios that must be met for small and large type in order for it to pass their AA or AAA standards. Luckily for designers, there are some great tools that make it really easy to check to be sure that your colors pass.</p>
<p>This site checks your text and background color contrast against the AA and AAA standards for small and large type sizes.</p>
<p><a href="http://webaim.org/resources/contrastchecker/">http://webaim.org/resources/contrastchecker/</a></p>
<p>If your color combination fails to meet your chosen WCAG contrast standard, this site will provide similar color combinations that do meet those standards.</p>
<p><a href="http://contrast-finder.tanaguru.com/">http://contrast-finder.tanaguru.com/</a></p>
<h4>#2: Don’t Rely Only on Color</h4>
<p>I was using an online banking service, and I had to fill out a form. I hit submit and nothing happened. I tried again. It looked like it was processing and then nothing again. The site was using red and green outlines to indicate respectively, validated form fields and fields with errors, but they all looked the same to me. I couldn’t tell which fields were right and which were wrong. As a designer, <strong>don’t rely on color alone as an indicator.</strong> The designers should have also included symbols. Or even better, they could also supply an error message telling the user what is wrong with the entry so that colorblind users, and even those who can see red, don’t have to guess what they did wrong.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/554/0*nm28hrcBTnUAMCN3.">Left: How a person with normal vision sees a form with color-based indicators. Right: How a deuteranomalous person sees the same form with color-based indicators.</p>
<p>Empathy is a powerful tool. It is essential to understanding the needs, wants, and challenges of our users so that we can create engaging experiences that benefit them. Without it, the WCAG is just a list of tedious requirements instead of a resourceful guide to help you create experiences that can be used and enjoyed by everyone. If we create experiences solely based on our own habits and preferences, we will inevitably fail the user and create useless designs. And by using empathy, we not only create better designs, but we expand ourselves and become better designers.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=98b7003737ca" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca">Going Colorblind: An Experiment in Empathy and Accessibility</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Going Colorblind: An Experiment in Empathy and Accessibility

Top Stories