How to make your App colorblind friendly (resources and experience sharing)

AppSoGreat
Dec 9, 2017 · 4 min read
Image for post
Image for post

About 8% of males and 0.5% of females are colorblind (source). And despite the classification of the various colorblindness under dedicated terms (deuteran, protan, tritan), each color vision deficiency is unique. Because each person has it is own alteration of the photo-receptors on the retina.

Starting Android Lollipop (API 21), Google provides a Color Correction feature for colorblindness: Settings > Accessibility > Color Space Correction.

Image for post
Image for post

It is definitively a great help. However, as each colorblindness is unique, the configured corrections can help more or less depending on the person. That’s why a colorblind friendly design remains important to ensure a better accessibility for all.

You may want to make your App colorblind friendly for different reasons. Among them:

  • increase your potential market
  • help colorblind people accessing to wider range of application

Whatever your primary goal, it is clearly a win-win situation.

Designing a colorblind friendly App is not just about colors.

Rather to rely only on a color to pass a message, let’s mix colors with either symbols or patterns/textures to differentiate better the color hues. That’s what we focus on when selecting our graphics for our Connect game:

Image for post
Image for post

And on colors side:

First, to understand the difficulty of designing some color palettes to handle the various color vision deficiencies, let’s observe the 15 colors palette below. It shows a palette computed specifically for deuteranopia cases, resulting in 3 colors, each with 5 different nuances, for a deuteranopia vision.

It has been built using the HSL (Hue, Saturation and Luminosity) mode, not the classical RGB one (Red, Green and Blue). This HSL mode is especially appropriate to build colorblind friendly palettes. As colorblind people’s retina has difficulties to differentiate the Hue (the actual color), they rely more on the Luminosity (also named brightness). The Luminosity is the key parameter when building a colorblind friendly palette. More details on HSL in this article.

The palette below is very good for deuteranopia cases, but it is quite ugly for normal vision.

Image for post
Image for post
(source: http://mkweb.bcgsc.ca/biovis2012/color-blindness-palette.png)

The same can occur in the other way, if you design a cool color palette for normal vision only.

So, to cover all color vision deficiency types, and to provide at least a nice color palette to everyone, you will need to propose several color palettes. Each palette being optimized for one color vision deficiency type. Here are for example the ones we built and propose in our Ruby Square game:

Image for post
Image for post

Let’s start at design phase

Once you decide to propose several color palettes, you should think at design step on which screen / how you will propose them. Because it will impact the screens navigation. You need as well to think about automatic layout refresh after a color palette change. Even for the Android activity in the background. Thus, practically, in all Activity.onResume() methods you must manage a potential color palette change.

For your App icon, keep in mind you can use only one color palette. Thus try to limit your icon to the main colors, and check they fit for the maximum color vision deficiency types.

And finally, check your results into a free online Color Blindness simulator like Coblis:

In order to complete this article, here are two colorblind friendly games:


Image for post
Image for post
  • Ruby Square: colorblind friendly thanks to the 4 color palettes proposed. Easy to understand, difficult to master. Let’s spin the squares!

Image for post
Image for post
  • Connect all the pairs, with or without timer. Colorblind friendly thanks to the adjusted combination of colors and icons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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