Inclusive design is something that UX and UI designers are trained to pay attention to. After all, having an app that works for everyone is necessary for a successful product. Other kinds of designers, though — whether they focus on print or digital — don’t always keep accessibility at the forefront of their work.
Accessible design, usable design and inclusive (universal) design are three different design concepts. Accessible design focuses on making the needs of people with disabilities the priority. Usable design is important for creating products that are easy to use. Inclusive design is designing something that is able to be used by everyone, with limited need for adaptation.
To start, I want to talk about color. Designers love color. In fact, playing around with color is one of my favorite parts of designing or illustrating. But sometimes, the prettiest palette in my eyes is a disastrous headache for someone else. 300 million people in the world experience some type of color blindness. Being color blind doesn’t mean you can’t see color, it just means that you have a decreased ability to see the differences in color.
For context, here are two images. The first is an image edited for no visual impairments. The second image has been edited to show what someone with Protanopia (unable to differentiate between red and green) might see.
Using Adobe’s Color Blind Safe tool, here’s how ChatterBlast’s primary color palette fares on an accessibility level:
Using a color contrast ratio of 4.5: 1 for text or graphic elements is the minimum according to the Web Content Accessibility Guidelines (WCAG). This means that you could have a higher contrast between the text color and background color, but anything below would not be considered accessible. Adobe has a great new tool for identifying a solid color contrast for design.
Another important tip for designing is to not use color as the sole indicator for conveying meaning. This becomes increasingly clear in infographics that haven’t been designed with accessibility in mind. A good practice is to add some sort of pattern or symbol to go along with the color. So even if the color is important to the story, there is a second indicator to differentiate between the visuals on the screen.
Typography and the way we use text is another vital part of design. It’s important to remember that not everyone will have the same experience looking at a font. Twitter recently designed a new typeface for their app, believing that it was designed to be universally accessible. The entire redesign was put in place to increase inclusivity. They upped the contrast on many visual elements, changed the color themes for both day and night modes, and softened some of the UI motions. But still, many users claimed the new font gave them headaches.
The problem with this is that what is accessible for one person, might not be the same for another. While someone might need higher contrasts in colors due to vision impairments, someone else might have sensitivities that are affected by such. I think for an app as large as Twitter, their next step would be to develop options for their users to decide what color profiles work best for them.
The loud discourse has since quieted, but those who are negatively affected by the redesign are probably still quietly suffering.
If you’re interested in learning even more about accessibility and incorporating more inclusive practices into your design, here’s a list of references and tools for a smoother, more accessible experience:
- Google’s Material Design System
- Microsoft’s Inclusive Design Manual
- Google Color Tool
- Adobe Color Accessibility Tools
- Web Content Accessibility Guidelines
- Google’s Inclusive Marketing Guide
- Ashley Bischoff’s Presentation on Accessible Images
- Hemingway Editor for Readability
- Contrast Checker
- Vox Accessibility Checklist
