With 15% of the world’s population living with some form of disability, making apps more accessible is an important, but often overlooked, part of the app design process.
Types of disability that might affect a user’s experience include hearing and visual impairments, dyslexia, and physical limitations. As a result, designing for accessibility forces developers to think more carefully about every element of front-end design – from readability to content organization and the use of color.
In today’s world, this is more than just a ‘nice-to-have’. Incorporating accessible design features is essential if you want to promote inclusivity, reach a wide audience, and build positive brand perception.
Here are some suggestions for how to do it:
Design for colorblindness
Most color blind people are able to see things just as clearly as the rest of the population, the difference is their inability to distinguish red, green, or blue light. The deficiency is the result of a mutation in the X-chromosome – meaning women are more likely to be carriers than sufferers – and it can manifest in 3 main ways.
The most common is red/green color blindness, where sufferers mix up all colors which have red or green as part of the whole color. Those affected by Protan color blindness are less sensitive to red light, whilst sufferers of Deuteranopia have the same problem with green. For example, a person with Protanopia will confuse blue and purple because they can’t recognize the red element of the color purple. The third type of color deficiency, Tritanopia, is the least common and refers to sufferers who struggle to distinguish blue or yellow light. The image below shows what the rainbow may look like individuals with each of these forms of color blindness.
So, how can design for better color accessibility?
You might be thinking: “why should I bother designing for such a small group of users?” But generally, the elements that are favorable for colorblind users are actually considered to be good design practices in the wider sense. So if your site is well designed, it should already be accessible to all users.
Designing for accessibility doesn’t mean that the aesthetic integrity of your design needs to suffer. With that in mind, here are the top five elements you should be focusing on for a colorblind-friendly UX:
- Use both colors and symbols.
- Keep it minimal
- Use patterns and textures to show the contrast
- Avoid bad color combo
Balance usability with your design spirit
Too often, people think that a compromise must be made between brand and accessibility, but designing for inclusivity doesn’t mean creating a product that is ugly and boring. It’s very possible to maintain your brand’s unique look and feel whilst remaining considerate of a wide range of users.
Thinking about usability from the first stages of design will mean the impact and cost of implementation are as low as possible and can be built into the brand you have already created.
Operating systems such as Windows, iOS, and Android come equipped with accessibility modules you can build into your apps from the beginning. Thinking about appropriate color schemes and page layouts are other easy ways to incorporate assistive features without compromising brand aesthetic.
Many accessible features have minimal effect on the visual appearance of your product and will benefit all users. After all, good design is good design.
Your content must be understood by your audience. It can’t have fancy and technical terms that overwhelm your users. That’s not your goal. Your aim is to have simple language that everyone can comprehend which allows users to access your app without having to Google any words.
Multiple language settings
While it does not fall into the same category as these other tips, it is important to recognize when your concept may be applicable to a non-English speaking audience. Translating all text is an easy way to expand your accessibility. On mobile, these options will often be automatically changed based on user settings.
An additional feature for multilingual users could be a slick drop-down menu built into the interface that can give language options from within the app.