Designing for Everyone: The Color & Shapes of Accessibility
Ida Leung
In my design career thus far, accessibility was something I hadn’t yet crossed paths with. It wasn’t a priority or even a concern at the companies I’d worked for in the past. So designing with accessibility in mind was something new I had to learn, here at Yammer. And it’s something we’ve prioritized to the point that we’ve even hired an in-house accessibility expert (Brendan McKeon) from whom I’m learning all the time. He reviews our products to make sure they’re useable for everyone, with required changes ranging from a simple color change to markups in the code.
This presents some interesting restraints. There are a variety of rules and considerations involved in creating an accessible site; that’s why we have someone who specializes in it. And to help us along, with Brendan’s assistance we’ve set some basic rules to keep our designs accessible. For example: information should not be conveyed using color, size, shape, or position alone. If an icon only changes color to indicate a different state, a person with color blindness would not be able to notice the difference. So instead of just a solid circle changing from green to grey, we would perhaps implement a solid green circle changing to a hollow grey one.
Another rule we’ve set is that all informational elements must have at least a 4.5:1 contrast ratio. That means that the contrast between the foreground element and the background it’s on needs to have a high enough contrast (4.5 to 1) that they don’t blend together. This ensures that elements stand out. (Check out WebAIM’s Color Contrast Checker to see this in action.)
Below are a few examples of different colors on different backgrounds. The contrast ratios in the NOT PASS column wouldn’t fly on Yammer.com, since the relationship of the contrasts of the words to the background is too small, and hence not as easy to read for the visually impaired.
Another thing that I’ve realized while considering accessibility is that many designers spend their days working on large, high-resolution monitors. However, the people using Yammer might be on smaller laptops capable of less vibrant colors. Having the guideline for contrast ratios helps us be sure that whatever we design, it’s acceptable to people no matter what screens they’re using.
Having these constraints has actually helped corral our designs in a design team that spans both physical locations and time zones. As designers, we tend to have a love affair with subtleties; light hints of colors as dividers or to show content that might be tertiary. But for the visually challenged, there’s really no subtleties. Design with these constraints makes our team question if certain elements are necessary at all. And that, in turn, makes us better designers. Because on Yammer, we’re designing for everyone.
Ida Leung is a UI Designer at Yammer. She smuggled so much Haribo candy back from Europe that it’s a miracle she wasn’t detained. And we love her for it.
