Color Contrast as an Accessibility Feature

Photo by Hamed Daram on Unsplash

Color Contrast as an Accessibility Feature

When it’s good we don’t give it a thought but when it's bad, nothing else works. Let’s talk about color in accessible publishing.

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and forms. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

WebAim provides a lot of great resources, information, and examples of color contrast and many other things about accessibility compliance.

Users with visual impairment often need help when color is used online on websites and in electronic documents. Something worth considering is that it is estimated that as many as 1 in 12 men have some degree of color blindness. That means that realistically, something like 8% of male users will struggle with your website or documents if you don’t use color correctly. And even more to the point, people with color blindness are rarely considered “disabled” so they seldom seek out accessible products. This is a large demographic whose needs are only being met as an afterthought.

There are several tools online that allow you to check your color contrast, including WebAim’s contrast checker. It’s helpful to know that whatever the contrast ratio is, it will stay the same if the colors of the foreground and background are swapped.

Instructions should never rely on color alone, such as identifying important information with red text, and charts and graphs should not require color specifically to relay information. For example, a pie chart where only color separates the segments will not convey any useful information to someone who sees the whole thing as a grey circle. When this occurs, the chart should contain clear labeling and patterns should be added to the segments to define them.

A good way to check for color in your space is by printing black-and-white samples from your website and documents. If there is information that cannot be clearly understood because of color, make the necessary adjustments. Content such as ‘Click the green button’ or ‘Required fields are red’ is useless to users who can’t see green or red. Back these kinds of instructions up with at least one more identifying remark.

Accessibility is always about giving the user what they need to use the information that you provide. Instructions should always be clear and usable for everyone, and that means that color must not be the only way of conveying information or instructions.

A common misconception is that web accessibility means making your website black and white and boring. This is the opposite of the intent. Web accessibility is about improving websites, not taking away from them. Now that you know, it surely makes sense to agree that it’s not good business to create presentations that rely solely on color.