Written by Cherylin 2022 Cohort
As a UI designer, colour plays an integral role in user interface design. It has many benefits. By using colour in UI design, user experience can be improved, purchasing decisions can be influenced, and brand identity can be expressed.
Does everyone know what colour blindness is?
Let me tell you about the condition of this disease. Colour-blind people have difficulty seeing colours clearly; some lose their ability to distinguish colours between red, green, or blue tones. It depends on which type of colour blindness they have. According to the research, men are most likely to have this condition; approximately 1 in every 12 men and 1 in every 200 women are colour-blind. At this point, it is essential to design an accessible UI for them.
So how can we design appropriate and effective UI for colour-blind users? In this blog, I will give tips for creating an accessible UI for colour-blind users. Let’s dig a bit deeper together!
Designing for the colour-blind
1. Use proper contrast
Understanding the condition of this disease is essential for UI designers. A study found that some colour-blind people can’t distinguish tones (red, yellow, blue, green, etc.), while some can distinguish shades better than people with normal vision. For instance, when colour-blind people see a red button on a green background, they will see it almost in the same colour, which leads to many problems such as unreadable text, an invisible button, an invisible essential element, etc. The reason is that they perceive each aspect from the luminance contrast, and the difference between red and green is too close. It would be best to use high contrast in your essential design elements, such as the primary button, to make a useful UI for the users.
2. Use alternative elements
As I mentioned before, colour-blind users can’t differentiate between each colour clearly, so colours shouldn’t define consumable information. To solve this problem, instead of using colour to decide on the user interface, we can use other elements such as text, strokes, patterns, and texture to describe the action of each content. For example, you should use a label or symbol to illustrate the text field.
After you finish your work, I recommend you use the colour blindness simulator, the online tool, to recheck and test your work on how your website or application looks to colour-blind users.
Just follow this link!
https://www.color-blindness.com/coblis-color-blindness-simulator/