How to make your App colorblind friendly (resources and experience sharing)
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.
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:
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.
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:
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:
- Ruby Square: colorblind friendly thanks to the 4 color palettes proposed. Easy to understand, difficult to master. Let’s spin the squares!
- Connect all the pairs, with or without timer. Colorblind friendly thanks to the adjusted combination of colors and icons.
Other AppSoGreat.com article: How to optimize the localization effort for small mobile games (experience sharing)
More information about colorblindness
And this article with great graphical assets:
If you like this article, don’t hesitate to click the clap button below to show your support. It is really appreciated. Thank you!
