Accessibility in Design
Accessibility is the practice of making your websites usable by as many people as possible.
How much have you thought about accessibility in design? There’s no right or wrong answer here — after all, we can’t know what we don’t know. And design as a general concept is meant to be accessible inherently.
Think about it: our work is meant to make ideas and information clearer to the widest possible audience.
Here’s the tricky part: when we’re thinking about that widest possible audience, it’s easy to forget about them as individuals. And individually, there might be differences in ability or background that hinder their understanding or comprehension of our designs.
The good news is that there’s lots we can do to make sure our work is accessible and inclusive. And isn’t that the kind of world we want to live in anyway?
Color Accessibility
1 in 12 men and 1 in 200 women are color blind. All together, there are an estimated 300 million people in the world with a color vision deficiency. There are three main types of color blindness: red-green (hard to tell the difference between red and green), blue-yellow (hard to tell the difference between blue and green and between yellow and red), or complete.
Someone with a visual impairment or color vision deficiency may not see your creations the way you intended. However, by taking into consideration color accessibility, people with vision deficiencies can interact with graphic design the same way their non-visually-impaired counterparts can.
Here are just a few ways you can do that:
Color blindness simulators
A good rule of thumb is to make sure color isn’t the only way of understanding information. This way, you’re not limiting content to only those who visually can see the differentiation in colors. To ensure your color choices are visible to individuals with different types of color blindness, use one of these tools:
- Color Oracle (app download)
- Stark (Sketch, Figma, and Adobe XD plugin)
- Toptal’s colorfilter (online simulator that lets you test your website)
Nifty, right?
If you’re using Adobe Photoshop and Illustrator, Adobe’s made it super easy to see how a design might appear to a color-blind user. Simply select view > proof setup > choose one of the color-blind options. You can also use the web-based version from Adobe, which has lots of robust tools — such as the color-blind safe feature, or the contrast checker. Speaking of contrast…
Contrast and compliance
You’ve probably heard and talked about contrast a lot as a designer.
When it comes to accessibility, it’s important to remember that our color pairings need to provide maximum contrast to ensure legibility for anyone with low vision or color deficiencies. This includes contrast between content and the background, such as with text or non-decorative images. Fortunately, there are some standard best practices we can use!
Contrast between text and color (or foreground elements and color) should be at least 4.5:1. For text larger than 18 points or at least 14 points when bolded, you can move to a 3:1 ratio.
If you’re not feeling groovy like Mona Lisa about this sudden math problem thrown into your design, that’s okay. There are all sorts of tools to do the math for us.
Our favorite is Who Can Use This Color Combination, where it lets us see the contrast ratio between a foreground and a background color combination, but we can also preview how it might appear in different conditions. Whether it’s a form of color-blindness, cataracts, or night shift mode, it’s possible to assess the combination for a variety of conditions.
You can also refer right back to Adobe, or check out Color Review, which lets you check the contrast ratio between two colors. Color Review lets you mess around with the color picker to see what the ratio is with an alternative color, while offering explanations of the ratio rating and why it’s so important.
Or take it a step further with Accessible Colors, which lets you preview what a color combination looks like while checking the contrast ratio and compliance level. And bonus: it will recommend adjustments you can make to the color combo to remain in compliance. Winning!
Color Palette
With contrast and ratios well underway, you can start to think about building an accessible color palette that will work for varied visual requirements. One of the best tools out there is the Accessible Color Palette Builder, which lets you enter up to six colors to see how they rank on the accessibility scale. Want to take it a step further and see even more color combinations? Check out Contrast Grid, though be forewarned – things can get wild quickly!
Remember, color choice is about communication. Whether it’s about conveying a brand identity or helping users understand information, the end goal is to communicate something. Being thoughtful about using accessible color options empowers you in creating more cohesive and inclusive design.
Of course, this is just the very tip of the iceberg when it comes to thinking about accessibility in design. For more resources, check out the links below. In the meantime, unleash your inner kindergartner and get wild with mixing colors! (Accessibly, of course.)
Resources:
https://www.invisionapp.com/inside-design/color-accessibility-product-design/
https://www.rgd.ca/database/files/library/RGD_AccessAbility_Handbook.pdf
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/
https://www.clintoneye.com/color-blindness.html
http://web-accessibility.carnegiemuseums.org/design/color/
https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products
PIN ME!
