Color vision deficiencies (also known as CVD, or less accurately as colorblindness) affects about 300 million people worldwide. While CVD is one of the most common vision disabilities, it’s also one of the most frequently misunderstood: CVD can affect vision in different ways, and it’s not simply “an inability to see red or green.”
In another article, we covered some of the most common myths about color blindness. Below, we’ll discuss why people with CVD are an important part of the digital accessibility conversation — and how you can improve your content to make it more useful for people with the condition.
How Color Blindness Affects Internet Browsing Behavior
While there are many types of CVD, people with the condition have trouble distinguishing certain colors — that doesn’t mean that they cannot see red, green, or blue, but they’re more likely to “mix up" certain hues.
Color blindness is usually organized into one of four categories:
- People with deuteranopia have trouble distinguishing reds.
- People with protanopia have trouble distinguishing greens.
- People with tritanopia have trouble distinguishing blues.
- People with monochromacy have trouble distinguishing reds, greens, and blues.
It’s important to note that CVD affects everyone differently. Even if two people are diagnosed with protanopia, one individual may be more “green-weak" than the other.
Many people who live with CVD find effective ways to accommodate their disability. Some may use high-contrast modes or change the color settings on their devices to make the differences between colors more distinct.
However, those methods aren’t perfect. Your website might have issues that impact the experiences of color blind users:
- If green text appears against a red background, it may be unreadable.
- If you use color alone to convey information (for instance, writing a message that reads, “click the green button"), some users may be unable to complete the action.
- If your call-to-action text has low contrast with your website’s background, some users might miss it.
Needless to say, if your users can’t read or interact with your content, you’ve missed an opportunity to make a connection — and since CVD is a relatively common vision condition, every designer and developer should make a reasonable effort to accommodate those users.
WCAG Success Criteria for Color Blind Accessibility
You can avoid these mistakes by following the Web Content Accessibility Guidelines (WCAG). Published by the World Wide Web Consortium (W3C), WCAG contains dozens of success criteria, which are pass-or-fail statements intended to help developers create more accessible content.
Success criteria that are especially relevant to users with CVD include:
WCAG 2.1 Success Criterion (SC) 1.4.1, “Use of Color"
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Following this criterion ensures that people have multiple ways to understand information — instead of telling them to “click the red button,” you provide useful instructions that accommodate different types of assistive technologies and browsing behaviors.
Related: Use of Color for Accessibility Explained
WCAG 2.1 SC 1.1.1, “Non-Text Content"
With limited exceptions, this criterion requires that “all non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”
For example, by providing image alternative descriptions (also called alt text), you give your users more ways to adapt content to meet their preferences. Rather than viewing the image, they can read the alt text and understand the image’s purpose — but if you don’t have accurate text alternatives, you risk alienating some users.
Related: Examples of Text Alternatives to Non-Text Content
WCAG 2.1 SC 1.4.3, “Contrast (Minimum)”
Color contrast refers to the difference in luminance (light) between text and its background. Sufficient color contrast makes content more readable for people with CVD and other vision conditions.
WCAG requires the visual presentation of text (and images of text) to maintain a contrast ratio of at least 4.5:1. Large-scale text must have a contrast ratio of at least 3.1.
To test your website or chosen color-pairs against WCAG contrast ratio requirements, use the Color Contrast Accessibility Validator, a free resource provided by the Bureau of Internet Accessibility.
Related: The Basics and Importance of Color Contrast for Web Accessibility
How can I test my content for color blindness accessibility?
The quick answer: Test your content regularly against WCAG’s Level AA success criteria. By using both automated and manual tests, you can improve experiences for people with CVD — and for people with low vision, hearing disabilities, neurocognitive differences, and hundreds of other conditions.
Designers can also download browser extensions like Colorblindly, which simulates the experiences of people with CVD. Colorblindly has eight settings, and while it doesn’t work on built-in Chrome domains (such as the Chrome Web Store), it’s a useful resource for understanding the perspectives of users.
Ultimately, WCAG is the best framework for creating accessible content. While CVD simulations are helpful, WCAG has simple rules built on the four foundational principles of accessibility: Content must be perceivable, operable, understandable, and robust enough for all users.
To test your content, get started with our free website analysis or send us a message to connect with a subject matter expert.
