One pink lemon on top of a pile of yellow Lemons

There’s More to Web Accessibility Than Alt Text, Part 1: Color Contrast

Why is color an accessibility requirement?

According to the World Health Organization, approximately 1.3 billion people live with some form of vision impairment, ranging from moderate to severe. Often, color is overlooked in terms of accessibility, but it plays an important role and is one of the criteria within the Web Content Accessibility Guidelines (WCAG, pronounced wick-ag).

How can this requirement be met?

Built-in Accessibility Checkers are improving, but ultimately color contrast is a manual check. This can be achieved by using an online color contrast analyzer, such as WebAIM’s color contrast checker, to measure the contrast ratio between foreground and background colors.

Besides testing the accessibility of color combinations, don’t rely on color alone to convey a message – incorporate messaging or icons as an alternate representation for the visually impaired. For example, if an online form highlights a form field using a red box, a user with color blindness may not notice a difference. But if this same text field was flagged with a message or a “warning” icon, along with the red colored outline, one would be able to tell there was more information needed.

Help is out there!

As with any WCAG criteria, meeting them may sound overwhelming, but there are lots of online resources to guide you along the way. And, eventually, meeting color contrast will become second nature!

For a more in-depth explanation of contrast requirements, check out WebAIM’s Contrast & Color Accessibility article.