<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=948814738540454&amp;ev=PageView&amp;noscript=1">
Menu

Calling all web designers! Make color choices based on web accessibility.

By Chloe Mark | March 2017

You may have heard about web accessibility, but if you're like me, you assumed this mostly had to do with the technical features and layout of a site. However, the choices you make as a designer in something as aesthetically-based as color can greatly impact someone with vision loss.web-accessibility-standards-for-designers

To learn more about Web Accessibility and why it matters, read our overview here

Color & meaning

In terms of website accessibility, color has meaning. If a designer abides by guidelines, you can help "ensure that all users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it" (W3C).

Siteimprove addresses how this works with the form below. To many of us, the color red means "required" and the color yellow draws our attention to the location of the submit button. But for someone with vision loss, you need to specify in the alt text what you're implying with your color choice. 

web-accessibility-color-formImage source: Siteimprove

 

Color & contrast

A 3:1 ratio of color contrast is the minimum requirement for accessibility. If possible, aim for 4.5:1 as it "is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging" (W3C).

Testing tools to help with both

If you are unfamiliar with how these color rules all work, you can simply test some of your color choices with the following tools gathered by Siteimprove.

color-contrast-web-accessibility-tester

color-contrast-web-design-test

  • Grayscale Remove Colors: Temporarily removes the color from your website so you can see how it would look for someone with color blindness. It will help you find the spots where you rely too heavily on color for meaning.  
color-blindness-website-checker

Additional Considerations

If you need advice on how to approach this topic with your design team or directors, take a look at Siteimprove's full post.This is especially helpful if you have long-term brand standards that need changing. They discuss what to do if members of your team do not understand the need to meet accessibility standards. 

Want help making your site and future designs meet standards? Use our accessibility resource center below.

Topics: Web Design

Register for our Web Accessibility Event