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.
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.
Image 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.
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.
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.