Stop Designing For Only 85% Of Users
As designers, we like to think we are solution-based. But whereas we wouldn’t hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious to flaws in our user interfaces. Poor visual design, in particular, can be a barrier to a good user experience. Whereas disability advocacy has long focused on ways to help the user adapt to the situation, we have reached a point where users expect products to be optimized for a broad range of needs.
Your company wants to make sure it is serving the widest possible audience. As a designer, you care about users — call it empathy in design or call it being a human.
The visual interface is an obvious place to begin digging into accessibility. In this article, we’ll discuss some of the most common visual impairments, focusing on color-blindness to explain how you can make small changes to your workflow and products to ensure you’re not alienating users.
Accessibility Affects All Users
It isn’t just the 8.6% of the population with visual impairments who benefit from accessibility. Good design is good design. Many websites and apps are overly complicated, and everyone finds at least some interfaces difficult to use: when we’re tired, when we’re awkwardly trying to check something while walking down a street, when we’re squinting at a screen in the dark, or when we’ve got a shopping basket in one hand and our phone in the other.
Even the bulk of the population with standard eyesight experience color in different ways. So, accessibility isn’t just about those suffering from impaired vision; everyone has their own constraints, physical and mental, and we can help significantly simply by being more thoughtful when we work. While designing for accessibility will sometimes mean making an accommodation, keeping best practices and accessibility in mind as you work will often mean you create a product that nails both.
How Do Visual Impairments Change The Experience?
To create a properly accessible product, we first need to understand how someone with a visual impairment sees things.
According to the WHO, refractive errors (nearsightedness, farsightedness, astigmatism and presbyopia) account for 43% of visual impairments, cataracts for 33% and glaucoma for 2%. Color-blindness alone affects approximately 4.5% of the population and can vastly impact the way a user experiences design.
There are three main types of color-blindness:
Monochromacy (total color-blindness)
While uncommon, people with this condition cannot see color at all. So, for example, bright or pastel interfaces with subtle gradients that rely on hues to differentiate features will be very difficult for the user to navigate. Action buttons might be hard to find.
Dichromacy (two-color vision)
For people with dichromacy, what is intended to be a broad color palette might appear to be made up of different shades of the same hue. If the app uses colors to denote different labels or channels, the user won’t necessarily be able to benefit from that design feature.
Anomalous trichromacy (deficient color vision)
With deficient color vision, one of the three cones in the eye malfunction to varying degrees of severity. This ranges from near-normal color vision to two-color vision in severe cases. Users with anomalous trichromacy might find your logo or design to be less compelling if color is a major factor — especially problematic if you’re relying on the same fonts and icons for your buttons.
Color As A Tool But Not A Magic Key
Color not only plays a large role in determining how an interface looks, but also helps in systematizing content, defining hierarchy and informing interface behaviors and flows. It’s a powerful design tool, but to use it efficiently, you need to understand its capabilities and limitations. Some key rules that we’ll discuss below are:
keeping color-blindness in mind when picking and implementing color palettes, as we will demonstrate below;
never relying on color alone for anything important — clarify color information with icons and, ideally, text;
ensuring text links stand out from the surrounding content.
Because the most common difficulty that visually impaired users have is identifying particular hues of color, try to rely more on brightness contrast to differentiate elements and to make them legible.
Avoid contrasting hues from adjoining parts of the circle if those colors do not contrast in lightness.
Amazon does a better job of this by adding the color’s name on top of each thumbnail when the user hovers over it.
Avoid using color as the only indication of what to do or of the information you are trying to get across. Instead, use color only as a hint to the user.