{"id":2834,"date":"2016-08-31T16:57:35","date_gmt":"2016-08-31T15:57:35","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=2834"},"modified":"2020-09-03T11:57:13","modified_gmt":"2020-09-03T10:57:13","slug":"designing-for-and-with-color-blindness","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-for-and-with-color-blindness\/","title":{"rendered":"Designing For (and With) Color Blindness"},"content":{"rendered":"

Every time someone finds out I\u2019m color blind, I\u2019m always hit with the same question: \u201cSo, what color is this?\u201d 95% of the time I\u2019ll answer correctly, which is always followed by, \u201cWait, so if you can tell this is {insert color}, then how are you color blind? What do you see?\u201d. This is where the joy of explaining how color blindness works, and how it affects me comes into play.<\/p>\n

As designers, we constantly worry about legibility, how engaging content is, whether hit targets are big enough, or if a user can navigate through a workflow. But we often forget about the one in ten people that are color blind. Too many times have I downloaded an app or game only to realize that using it was a huge pain. I\u2019m often unable to distinguish one object from another or determine how something is labeled.<\/p>\n

If 1 out of every 10 users finds your app to be difficult or even impossible to use, your ratings and reviews will drop drastically. So, how do we test for this? How do we fix any issues? And how can we prevent issues from popping up to begin with?<\/p>\n

Where We \u2018See\u2019 Problems<\/strong><\/p>\n

Being color blind does not mean I cannot see any colors. My life does not lack hues; looking through my eyes is not like watching a Hitchcock film.<\/p>\n

I don\u2019t miss out on any colors\u200a\u2014\u200aI see them all. I just have trouble being able to label them or tell them apart. When the leaves change color in the fall, I don\u2019t always get to see the reds and oranges, and yellows. I may just see orange, or sometimes, I hardly notice the change and leaves go straight from green to brown. That being said, when designing apps, we should not look at individual colors and ask if they are \u2018visible\u2019, but rather look at groupings of colors, and see if they are distinguishable. Even then, we may require more visual aids to make sure that users will not mistake one color for another.<\/p>\n

Successful Apps<\/strong><\/p>\n

Some apps and programs have done a great job of catering towards those who suffer from color blindness. Trello<\/a>, a web-based application that allows users to organize tasks, does a great job of allowing a user to activate a color-blind mode. This small function allows a user, like myself, to be able to quickly distinguish between labels.<\/p>\n

\"Color<\/a>

Trello\u2019s solution for allowing color blind users to distinguish labels<\/p><\/div>\n

Another app, Two Dots<\/a>, a game focused around making connections of dots of the same color also has a color-blind mode. When I first started playing the game, I was extremely slow and had a hard time beating any level in the allotted amount of moves. Because I couldn\u2019t distinguish the different colored dots easily, I had trouble creating combos. However, after discovering their color-blind mode, which adds an extra layer of classification on the dots by using symbols, the game became a lot more usable. Instead of having to rely on strictly color, I could play the game trying to connect symbols.<\/p>\n

\"Colorblind<\/a>

Two Dots\u2019 colorblind mode<\/p><\/div>\n

Preventing the Mistakes<\/strong><\/p>\n

So, you\u2019ve made your designs, chosen layouts, icons, typefaces, everything. You just need to make sure your color choices work for those who are color blind. But, how do you do this other than the obvious \u2018ask your color blind friend, co-worker, fiance, nephew, etc\u2019? Well, there\u2019s a couple of options. There\u2019s Sim Daltonism<\/a>, an app that allows users to preview their screens like a color blind person would see them. If you\u2019re having even a little bit of trouble distinguishing designs when previewing through this, most likely, I would too. There are plenty of color blindness simulation apps, this is just the one that seems to replicate what I see the best.<\/p>\n

Another very important test is to see how your designs work in monochrome. This should be a regular test you\u2019re performing on your designs, but it is extremely helpful when trying to avoid the likes of myself having trouble using your apps. Bringing a design into monochrome will allow you to see what hues are too close. If two colors of the same temperature (blue and purple, red and green, orange and red, etc.) have too similar of a hue, they will be extremely hard to tell apart. Google maps, despite using red and green for busy and no traffic, use colors of pretty different hues, allowing me to see the differences pretty well.<\/p>\n

<\/div>
<\/svg><\/div>

\"Bringing a design into monochrome will allow you to see what hues are too close.\"<\/p><\/span><\/blockquote>\n

A really easy way to test your designs in monochrome (when on iPhone), is to go into your settings, and turn on the accessibility<\/a> for Grayscale. After doing this, triple-pressing your home button will trigger the accessibility function on and off.<\/p>\n

\"Accessibility<\/a>

Google Maps\u2019 way of showing amount of traffic<\/p><\/div>\n

\u201cBut how are you a designer if you can\u2019t see colors?\u201d<\/strong><\/p>\n

Good question, I don\u2019t know. I just fake that I know what I\u2019m doing, and hope that my boss wont notice.<\/p>\n

But actually, it makes my life a little bit easier (at least in terms of design, not so much with picking outfits). I spend less time in the initial parts of design worrying about \u2018what shade of blue should I use?\u2019 or \u2018will this orange go well this color?\u2019. Instead, I get to focus on does this layout work well, and does it work well in black and white. I don\u2019t typically need to find another color blind person to validate my color choices. When I explain color choices to a client, I\u2019m less focused on the names of the colors and more on the temperature or value of them, whether they promote the feeling or description I want them to. Red does not necessarily mean \u2018no\u2019 or \u2018error\u2019, but that particular temperature and vibrance may. Nothing about a cool, relaxed color screams error to me.<\/p>\n

Even picking colors to use has become somewhat easier. Am I sitting here mixing paints until I find a perfect shade of blue? No. Do I expect those who aren\u2019t color blind to do that? No. In fact, I tend to steal or borrow pre-made color palettes. Now, I\u2019m not finding apps and copying their colors Hex for Hex, instead I\u2019m finding compositions that I think have a really nice palette, and sampling from them. For example, Miley Cyrus\u2019 music video for \u2018We Can\u2019t Stop\u2019, in my opinion, has some awesome imagery and colors. I\u2019ll steal from that. Same with \u2018Stylo\u2019 by the Gorillaz.<\/p>\n

<\/div>
<\/svg><\/div>

\"I\u2019m finding compositions that I think have a really nice palette, and sampling from them.\"<\/p><\/span><\/blockquote>\n

\"\u2018We<\/a>

Frames from \u2018We Can\u2019t Stop\u2019 by Miley Cyrus<\/p><\/div>\n

\"Color<\/a>

Color selection
<\/p><\/div>\n

\"\u2018Stylo\u2019<\/a>

Frames from \u2018Stylo\u2019 by the Gorillaz<\/p><\/div>\n

\"Color<\/a>

Color Selection<\/p><\/div>\n

I\u2019ll find nice photographs that have great color palettes, pieces of furniture, paintings, anything. These already established and proven pieces are a great source of color influence. Apps like Sip<\/a> allow you to grab pixel sized color samples from your screen and use them in your designs. Qolor<\/a> allows you to do this in the real world using your iPhone\u2019s camera.<\/p>\n

So, why did I read this?<\/strong><\/p>\n

You\u2019ve got nothing else to do? You\u2019re putting off your homework assignments? I don\u2019t know. But hopefully, it\u2019s because you want to make sure your apps are at an optimal level for everyone to use. Even though only a relatively small portion of the population is color blind, there is still a need to design with them in mind. And, if we are keeping that demographic in mind when making our color choices, we know that the final designs will work for everyone, resulting in a much, much better app and user experience.<\/p>\n

Have any questions or want to get in contact? Feel free to shoot me a tweet<\/a> and\/or check out the work that myself and my co-workers are producing over at Intrepid Pursuits<\/a>.<\/p>\n

This post was originally published on Aaron's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Every time someone finds out I\u2019m color blind, I\u2019m always hit with the same question: \u201cSo, what color is this?\u201d 95% of the time I\u2019ll answer correctly, which is always followed by, \u201cWait, so if you can tell this is {insert color}, then how are you color blind? What do you see?\u201d. This is where the joy of explaining how… Read More ￫<\/a><\/p>\n","protected":false},"author":26,"featured_media":2847,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[495],"tags":[],"class_list":["post-2834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessiblity"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n