Improving The Color Accessibility For Color-Blind Users

With 4.5% of the global population experiencing color blindness, 4% suffering from low vision, and another 0.6% being blind, visual difficulties with using the web are more prevalent than you might appreciate. Women are less likely to have this disease when approximately every twelfth man is prone to it. Designing for color-blind people can be easily forgotten because most designers aren’t color-blind. This article will gather and summarize some of the principles to improve the color accessibility for the color-blind user in UX design.

What is color blindness?

Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females.

There are two types of color blindness. The most common is red/green color blindness which can be broken down into two types: Protan and Deutan. Those affected by Protan color blindness are less sensitive to red light, whilst sufferers of Deuteranopia have the same problem with green. There are also other kinds of color blindness. Blue-yellow color blindness, and the condition called Tritanopia or Tritanomaly.

As a designer, ensure your product is color accessible is important for people with visual impairment to interact with the digital product in the same way as non-visually-impaired people. For designers, the most challenge thing is it hard to know what color blind user see and the differences between then and the average user sees. Also, the difference between the different types of color blindness just adds an additional layer of complexity. In this way, several strategies can be used to enhance the accessibility for color blindness people in UX design.

Use both colors and symbols

Designers can’t only rely on color to convey a message. Certain types of color blindness might be difficult or impossible to see the red error messages. The color designation with a caption or an icon so that the user can understand its function no matter what happens with colors.For example, people with protanopia can be hard to see red color, in this way it can be difficult for designer uses only red to indicates the mistakes on the form. A caption or an icon can be a good solution to deal with this situation.

On Facebook’s form fields, the error messages are indicated with red color and icons.

Use patterns and textures to show the contrast

It’s common that color is used to signify different segments of a graph. However, only using color can be unfriendly to the color blindness user.

In this case, different patterns and texts can indicate the information to the color-blindness user.

Contrast is critical for readability.

Most color blindness people see a lower contrast than people who don’t suffer from color blindness. Using Contrast colors or colors on the opposite ends of the color spectrum work best for color-blind users. Also,to make sure about contrast, Web Content Accessibility Guidelines 2.0 level AA requires a contrast ratio of 4.5 for normal texts (14px — 18px).
In the palette below the 15 colors appear as 5-color tone progressions to those with color blindness which can be sufficient for most of the application’s design.

Some may argue about why a digital product should be designed with such a small population. Like David Kelly, the founder of IDEO said: “The main tenet of design thinking is empathy for the people you’re trying to design for.” UX designer should design for all audiences and empathy is the biggest asset for all UX designers. In the end, digital products aren’t just meant to look good but to be easy to use for everyone- including color blind people.


Design Critique: Nike Run Club

Nike Run Club is an app built to provide the runner with the community, guidance, and motivation they need to reach their running goals. The clean design and various features make it different from other running apps. By using Nike Run Club app, the runner can track their progress and get real-time feedback, get their run with coaching and workouts. What’s more, they can dig into the details with the record of every fun as well.

✔Strong discoverability and feedback


On the Quickstart page, the start button is clear and easy to find which inform the runner to start to record their running. During running, the pause button shows to the runner to stop recording as soon as they stop. This is especially convenient for the runner who wants to stop recording during running, and the big icon can be easy to find and click. By using the principle of feedback, there are three states after running. A stop button was shown to stop recording, running details and share page are here for the runner to review their running information and share their achievements.

✔Clear Signifiers

According to Don Norman’s theory, signifier, the Nike Run Club app uses clear labels and visual design to inform runner the different functions on the platform. For table bar, different icons inform runner the different features including Feed, Activity, Run, Club, and Inbox. For the Activity page, runner’s total kilometers is in the middle of the page. Clear and great details of previous running history have displayed in the following section: running date, running speed, and kilometers.

For the Guided Runs page, bold texts refer to the heading of each section. It has the same style images for each section as well. It also displays details including the duration of running time and the type of running.


✔Motivate Conceptual Model

Nike Run Club has a Weekly Challenge page that will help encourage users to stay on their exercise schedule every week. Different Weekly Challenges can help runner “ stay motivated” The conceptual model of Weekly Challenge meets the runner’s needs to motivated themselves by Unlock Reward each week. Runners can join challenge base on their level and see other runners’ running achievement.

× Poor Visibility of Find a Friend Feature

There are three access to the Find a friend page. From Activity page and Club page, on the right of the top bar both of them have access to the Find a friend feature. However, the icons are different which can be very confusing for the user. At the same time, when the user scrolls down on the Feed page there is a button to the Find a friend feature. This leads to the poor discoverability of this feature.

The icon on the top bar should be the same in different pages based on the principle of discoverability.

All in all, the design of Nike Run Club satisfies the design principle: clear
Medium platform satisfies the design principles by Don Norman: Strong discoverability and feedback, clear signifiers, motivate conceptual model. This IOS app is an excellent example of human center design and an effective running app as well.