Accessibility in the aspect of color-blindness

It’s not called disability, it’s called accessibility, and accessibility helps all of us” — Scott Davis

When we start thinking about accessibility we encounter many guidelines about this topic and we don’t know where to start. There are a lot of disabilities and for this article, I would like to focus on color blindness, which is a tiny percentage of all disabilities matter.

Have you ever thought how lucky you are to see all the colors in a proper shade and brightness? How would the sunset look without its natural colors or watermelon being gray or yellow? If you saw only the red by itself, would you know it was red or would you think it was light green or brown or maybe both? *

*You might be a user who is experiencing a color-blindness disability and you understand the problem I am describing here.

This is the current information from the WHO (World Health Organization)

• Vision impairment poses an enormous global financial burden with the annual global costs of productivity losses associated with vision impairment estimated to be US$ 411 billion.
• The leading causes of vision impairment and blindness are uncorrected refractive errors and cataracts.
• The majority of people with vision impairment and blindness are over the age of 50 years; however, vision loss can affect people of all ages.
• Globally, at least 2.2 billion people have near or distant vision impairment. In at least 1 billion — or almost half — of these cases, vision impairment could have been prevented or has yet to be addressed.

The Problem

When UI/UX Designer is thinking about a new feature or project to be made, they always perceive it through design, colors, and structure. We tend to forget that color is not the only visual which is conveying information or action. As a designer, you are responsible for the project and its accessibility for everyone.

Red-green color-blindness

The most common type of color blindness. 8% of the male population and 0,5% of the female population. 99% of color-blindness people suffer from red-green color blindness. This term specifies:

• Deuteranopia (green-blind) — This affects the person with the ability to only distinguish three or so different hues. For comparison, normal vision picks up seven unique cues. The name red-green-color blindness can be misleading because it’s not just red and green that are affected. Deuteranomaly (green-weak) it’s a similar term with less intensity.

Deuteranopia / Deuteranomaly vs. No Color Deficiency

• Protanopia (red-blind) — Protonopia makes it difficult to distinguish between reddish colors and greenish colors as well but also blues and greens. Protanomaly (red-weak) it’s a similar term with less intensity.

Protanopia / Protanomaly vs. No Color Deficiency

Blue-yellow color-blindness

This is mostly called Tritanopia. This affects a person’s ability to see yellow and to a lesser extent, blue, it also affects colors that have yellow in them, like green and orange.

• Tritanopia (blue-yellow-blind) — It can be observed very rarely, and the term is misleading because people affected by tritan color blindness confuse blue with green and yellow with violet. The colors blue and yellow are usually not mixed up by tritanopes. Then the term blue-green would be more accurate here. Tritanomaly (blue-yellow weak) it’s a similar term with less intensity.

Tritanopia / Tritanomaly vs. No Color Deficiency

Complete color-blindness

The person sees in a monotone. If a person has this vision deficiency to the worst extent, then they see the entire world in grayscale. So it would be easy for these people to mix up green and blue. Purple and black. And yellow and white.

• Achromatopsia (no color) — Achromatomaly (color-weak) it’s a similar term with less intensity.

Achromatopsia / Achromatomaly vs. No Color Deficiency

Apple navigation

Apple uses very difficult-to-distinguish red, yellow and green radial navigation as visual cues in OSX windows but they solved it for the ones having color deficiencies by providing icons while hovering over them. Additionally, when the user hovers the symbol a bit longer then other options appear as well on the tooltip. A user is only going to interact with those circles when their mouse is hovering over them, it doesn’t disturb to hide the icons to keep the interface aesthetically.

Apple radial navigation

The tooltip and icons help the users to distinguish colored radial navigation

Dropbox

Dropbox users know the status of their uploading files by providing colored circles and icons close to the files.

Zalando

Apart from the various colors of the sneakers available, there is also a written color above every thumbnail, showing which color the shoes have.

Quick tips to improve your UI/UX Design

• Use more than just a color, pattern, icon, or texture to convey the information and empathy to the user. Don’t rely on color alone.
• Use plugins (Figma, Sketch, XD), and extensions for the browsers to check how your project looks like for people affected by the color-blindness:
• Figma — Color-Blind, Color Filter
• Firefox — NoCoffee Vision Simulator
• Chrome — Let’s get color blind, ColorBlindCheck, Spectrum, Vision, Colorblindly
• Tool for building an accessible color palette https://toolness.github.io/accessible-color-matrix/