Does your website rely heavily on color to help your visitors navigate your content? If the answer is yes, then you might be making it impossible for the 1 in 12 men and the 1 in 200 women with color-blindness and color vision deficiency (CVD) to engage with it.
Color blind web accessibility means designing a site so that people with color vision deficiency get the same information and can complete the same tasks as everyone else. In practice, that comes down to two things: color is never the only way a page conveys meaning, and text and interface elements have enough contrast to be seen.
What WCAG requires for color-blind users
Three success criteria in the Web Content Accessibility Guidelines (WCAG) 2.2 do most of the work for color-blind visitors:
- 1.4.1 Use of Color (Level A). Color can’t be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. A red field outline, a green “in stock” label or a color-coded chart legend each needs a second cue, such as text, an icon or a pattern.
- 1.4.3 Contrast (Minimum) (Level AA). Text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text. Placeholder text is included. Text that is part of a logo or brand name is exempt.
- 1.4.11 Non-text Contrast (Level AA). The visual parts of user interface components and their states, such as input borders, checkboxes and focus indicators, need at least 3:1 contrast against adjacent colors. So do the parts of graphics that are needed to understand them, such as chart lines and bars.
WCAG measures contrast as a difference in luminance (lightness), not hue. That’s why the contrast criteria help color-blind visitors, and people with low vision too, but don’t solve the problem on their own. Two colors can pass a contrast check and still look identical to someone with red-green color blindness, which is exactly the case 1.4.1 covers.
Do accessibility laws cover color blindness?
Accessibility laws rarely name color blindness. They reference technical standards, and WCAG includes the criteria above. In the U.S., the Department of Justice’s 2024 web rule under Title II of the Americans with Disabilities Act (ADA) requires state and local governments to meet WCAG 2.1 Level AA. An April 2026 interim final rule moved its compliance dates to April 26, 2027, for entities serving 50,000 or more people, and April 26, 2028, for smaller entities and special districts. Title III, which covers private businesses open to the public, has no adopted technical standard for websites. In the EU, the European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025, through national laws in each member state.
This content is for informational purposes only and does not constitute legal advice. WCAG is a technical standard; legal obligations vary by jurisdiction and context. Consult qualified counsel for legal guidance.
Why color-accessible design is better design
Think about the last time you visited a web page that used black text on a dark navy background, or distracting colors, patterns, or effects that made it hard to find what you were looking for. Did you push through, or did you give up and find what you needed somewhere else? A clear visual language that guides visitors to the intended outcome is the goal of web design for every visitor, not only those with CVD.
“Many designers think the accessibility color standards are limiting, but it comes down to good design principles.” - Christina Adams, Senior Manager of Digital Accessibility at Siteimprove
When designing your website, start with an understanding of the types of color-blindness
Most color blindness is inherited, and most of it is a form of red-green color blindness. A common misconception is that color-blind people see the world in grayscale. Very few do: most can see colors, but confuse particular pairs, such as reds, greens, browns and oranges.
| Type | What’s affected | Approximate share of men |
|---|---|---|
| Deuteranomaly (red-green) | Reduced sensitivity to green light; the most common form | 5% |
| Protanomaly (red-green) | Reduced sensitivity to red light | 1% |
| Deuteranopia (red-green) | No working green-sensitive cones | 1% |
| Protanopia (red-green) | No working red-sensitive cones; reds can look dark or close to black | 1% |
| Tritanomaly and tritanopia (blue-yellow) | Reduced or no sensitivity to blue light | Very rare |
| Monochromacy (achromatopsia, cone monochromacy) | Little or no color vision; achromatopsia often comes with light sensitivity | Very rare |
Source: Colour Blind Awareness. Blue-yellow types and monochromacy together affect roughly 1 in 30,000 to 50,000 people.
How to make your website more accessible to color blind users
First, don’t use overlays — automated widgets that claim to find and fix accessibility issues — on your website, however tempting that may be. They cover problems up rather than fixing them in the design and code.
Instead, focus on the places where color usually carries meaning on its own:
- Charts, graphs and other color coding. A legend that matches lines or segments by color alone fails for many color-blind visitors. Label data directly, add patterns or shapes, and make sure the parts of the graphic people need meet 3:1 contrast.
- In-text links. A link that differs from body text only by color can be missed completely, and a color change on hover isn’t enough. Underline links in body copy. If you don’t, one technique WCAG documents is a 3:1 contrast difference from the surrounding text plus an extra visual cue, such as an underline, on hover and keyboard focus.
- Errors, warnings and status. If a visitor misses a form field, clicks “submit,” and the field’s outline changes from black to red, that’s not enough to show them something’s wrong or how to fix it. Pair the color with an icon and a text message that names the problem.
- Form fields and placeholders. Placeholder text has to meet the same 4.5:1 contrast as other text, and input borders need 3:1 against the background so visitors can tell a field is there to be filled in.
- Text over images. Whether it’s live text or baked into the image file, words on a picture compete with the image behind them. Check contrast against the busiest part of the image, or put the text on a solid background.
When you choose a palette, pick colors that differ in lightness, not only in hue, and check the combinations in grayscale before they reach a page. If the challenge is a brand palette that predates contrast requirements, see how to handle brand colors and contrast. Text styling matters too; see choosing accessible fonts.
Also, consider prioritizing the places on a site that are highly informative or engaging for users. “Focusing on making these places easy to use with accessible design gives us the engagement we’re asking for from our users,” says Christina.
How to test for color blindness accessibility
- Do a grayscale pass. View key pages and templates in grayscale. Any chart, status or link that stops making sense relies on color alone.
- Simulate color vision deficiency. The developer tools in Chrome and Firefox can simulate common types, including protanopia, deuteranopia and tritanopia. Check forms, charts and navigation under each.
- Check contrast ratios. Use a color contrast checker on text, placeholders, borders and focus indicators, and audit your site’s accessibility to find contrast failures at scale.
- Review color-only meaning by hand. Automated checks can measure contrast, but they can’t reliably tell whether color is the only thing carrying meaning, so 1.4.1 needs a person to review it. See manual vs. automated accessibility testing for how the two fit together.
No website is perfect, but accessibility is not a one-off project. Color blindness is one part of designing for a wider range of vision; for the rest, see designing for visual impairments.
Frequently asked questions
Which WCAG criteria cover color blindness?
Mainly 1.4.1 Use of Color (Level A), 1.4.3 Contrast (Minimum) (Level AA) and 1.4.11 Non-text Contrast (Level AA). Together, they require a cue other than color for meaning, and minimum contrast for text, interface components and graphics.
Is color blindness covered by the ADA?
The ADA defines disability by its effect on a person’s major life activities, so whether a particular person’s color vision deficiency qualifies is an individual question. For websites, the practical question is different: whether the site conforms to WCAG, which covers color use for every visitor.
How do I test a website for color blindness?
Combine a grayscale pass, browser simulation of the common types of CVD, a contrast checker for text and interface elements, and a manual review of anything that uses color to carry meaning.
