Creating a design for color blind (and with them)

Every time someone finds out that I am color blind, I answer the same question: “What color is it?”. In 95% of cases, I will answer correctly, and therefore another question is asked me: “Wait, so you understand that this is [insert color name]? So what do you see? ”. And here begins the process of explaining how daltonism works, and how it affects me.



As designers, we constantly take care of clarity, the attractiveness of the content, and how easy it is for the user to use the interface. But we often forget about every tenth user who is color blind. Many times I downloaded the application or game, only to experience great pain when used. I often cannot distinguish one object from another or see how one or another object was marked.

')

If 1 in 10 users have difficulty using the application, or cannot use it at all, then the ratings will drop significantly. So how do we test the app? How to fix problems? How can you prevent these problems?

Where do we find problems

If I am color blind, this does not mean that I do not see color at all. My life has enough color; watching with my eyes is not the same as watching Hitchcock films.



I do not miss the colors, I see them all. I just can not name them or distinguish them from each other. When the leaves change their color in autumn, I do not always see red, orange and yellow shades. I see only orange, and sometimes I hardly notice the difference. For me, the leaves immediately go from green to brown. Taking this into account, when working on an application, you do not need to look at the colors separately and make sure that they are “visible”. It is necessary to look at combinations or groups of colors, whether they are distinguishable.

Successful applications

The developers of some applications did a great job for the benefit of those who suffer from color blindness. Trello , an organizer application, allows the user to enable the mode for color blind. This feature allows users like me to quickly distinguish labels.







Another application - Two Dots - is a game in which you need to connect dots of the same color. It also has the ability to enable the mode for color blindness. In the beginning I played this game very slowly, for a very long time I passed the levels. All because he could not distinguish the colors of the dots. After I discovered a color blind mode that uses symbols for dots of different colors, it became much easier to play.

Prevent mistakes

So, you have completed the design process, selected templates, icons, fonts, everything else. Now you need to make sure that the selected colors are suitable for color blind. But how to do this without asking a friend for a color blindness? There are a couple of ways. First, the Sim Daltonism application allows users to look at the screen through the eyes of color blindness.



Another important test is to look at your design in black and white. This test will allow you to see how similar the shades of colors are. If two colors of the same temperature (blue and purple, red and green, orange and red, etc.) have the same tone, they will be difficult to distinguish. Google Maps, despite the use of red and green colors, use different tones, which allows me to easily distinguish them.



The easiest way to test the application in black and white is to go to Settings → Universal Access → turn on Grayscale on iPhone.

“But how did you become a designer, even if you can't see colors?”

Good question, I do not know. I just pretend to know what I'm doing and hope my boss won't notice.



In fact, to some extent this simplifies my life. I spend less time at the initial stages of work, I don’t have to worry about “which shade of blue should I choose?” Or “would such an orange look?”. On the contrary, I focus on the arrangement of elements and how they look in black and white. I do not need to look for another color blind to validate the choice of colors.



Even the choice of colors has become easier. Am I wasting time mixing colors in search of the perfect blue? Not. Do I wait for others to do it for me? Not. In fact, I take the ready-made color schemes. This does not mean that I copy the hex codes exactly. I find compositions with a pleasant combination of colors. For example, the clip 'We Can't Stop' from Miley Cyrus, in my opinion, has excellent colors. I take them from there. The same with the clip 'Stylo' from Gorillaz.





Images from the clip 'We Can't Stop' by Miley Cyrus





Choice of colors





Images from the clip 'Stylo' by Gorillaz

Choice of colors



I find good photos with a pleasant combination of colors, such as photos of furniture, paintings, and so on. Sip application allows you to select combinations of colors from your screen. The main function of Qolor is the ability to determine the color using the camera of your iPhone.

So why did I read all this?

You have nothing else to do? Have you put off your household chores? I do not know. But I hope that in order for your applications to satisfy the needs of all users. Despite the fact that a relatively low proportion of people suffer from color blindness, you need to take into account their features. Ultimately, the result will justify the effort expended.



From the translator. With all the wishes and comments about the translation, please contact me in PM. Thank!