Photo by Stanislav Kondratiev from Pexels

Is your web app accessible for color blind people? Here’s one way to find out

One feedback received from a user on our website made us realize that we have slipped in considering a specific condition: color blind people.

So the question we had was: Ok, but how do we know how they are feeling?

Google Chrome to rescue

I’ve remembered to be scrolling through Twitter and remember that Chrome had added new functionalities at the time to help developers increase the accessibility check, and after five minutes of research I could try out my self.

How-To

The first thing to do is to open the Chrome Developer tools, you can do that using the keyboard shortcut Ctrl +Shift +J (on Windows) or Ctrl +Option + J (on Mac). Alternatively, you can right-click on the page and select Inspect.
Then, click on the three dots to open the configuration, and select More Tools -> Rendering, you should see a new tab named Rendering near the Console tab, and then you can scroll down to the bottom to see the options to simulate visual impairments.

The first step after open the Developer Tools
The second step, here you can choose which visual deficiency you want to test

Choose one of the visual deficiencies you want to test and then the browser will apply some color styling changes filter to simulate that.

The next question was: which of these options are more common between users?

According to the National Eye Institute, “The most common type of color blindness makes it hard to tell the difference between red and green.” and the “less-common type of color blindness makes it hard to tell the difference between blue and green, and between yellow and red.” (National Eye Institute, 2019).

Here’s an image of the browser simulating Deuteranomaly which is the most common type of red-green color blindness.

Deuteranomaly is the most common type of red-green color blindness. It makes the green look redder. This type is mild and doesn’t usually get in the way of normal activities.

With that in place, we will be able to make plans for the next design meetings to include these scenarios in consideration and make our web app accessible for those which has these conditions.

REFERENCES

Types of Color Blindness. (June 26, 2019), National Eye Institute. Retrieved from https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store