Roughly 300 million people worldwide have some form of colour vision deficiency. That is almost one in 25 humans. If your website has ten thousand visitors a month, four hundred of them cannot see colour the way your designer intended. That is not a small edge case. That is your audience.
Colour accessibility is not an optional polish pass. It is a legal requirement in most jurisdictions, WCAG 2.1 Level AA is the de facto legal standard under the Americans with Disabilities Act, the European Accessibility Act, and Canada’s Accessible Canada Act. It is also a functional requirement for your product to work at all for a substantial fraction of users.
Here is what the standards actually require, why the numbers are what they are, and how to build accessibility into your workflow without slowing down.
What “colour blindness” actually means
The term is slightly misleading. Almost nobody is truly colour blind in the sense of seeing the world in grayscale, that condition, called achromatopsia, affects about one in 33,000 people. What most people call colour blindness is actually a colour vision deficiency, the affected cones in the retina are present but tuned differently or less strongly than typical.
The three most common types:
- Deuteranomaly, reduced sensitivity to green. The most common deficiency, affecting about 5% of men. Greens and reds can be hard to distinguish.
- Protanomaly, reduced sensitivity to red. About 1% of men. Similar symptoms to deuteranomaly.
- Tritanomaly, reduced sensitivity to blue. Very rare, affecting less than 0.01% of people.
All of these are X-chromosome-linked, which is why they are much more common in men (one X chromosome) than in women (two X chromosomes, so a normal gene on one usually compensates).
A smaller number of people have stronger forms of these deficiencies where one cone type is entirely missing, deuteranopia, protanopia, tritanopia. The symptoms are similar but more pronounced.
What you need to know as a designer or developer
Two implications matter for product work.
One. Do not rely on colour alone to convey meaning. Red means “error” only if the user can distinguish red. Green means “success” only if the user can distinguish green. A red error message next to a green success message, both using only colour as the signal, is inaccessible to anyone with red-green deficiency.
The WCAG rule is called Use of Colour (SC 1.4.1): “Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
In practice: use icons, shape, position, or text labels in addition to colour. An error message should have a warning triangle icon. A success message should have a checkmark. A status indicator should have a label underneath. This is not defensive overkill. It is the baseline.
Two. Contrast ratios must meet the WCAG threshold.
The 4.5:1 rule
WCAG 2.1 Level AA requires:
- 4.5:1 contrast ratio between text and its background, for body text under 18 points (or 14 points if bold).
- 3:1 for large text (18 points and up, or 14 points and up if bold).
- 3:1 for UI components like buttons and form field borders.
Level AAA (a stricter level not usually required by law, but a good target) requires 7:1 and 4.5:1 respectively.
The contrast ratio is calculated using a specific formula defined in WCAG that accounts for the perceived luminance of each colour, not just the raw RGB values. The formula is:
(L1 + 0.05) / (L2 + 0.05)Where L1 is the lighter colour’s relative luminance and L2 is the darker’s. Relative luminance itself is calculated by linearizing each RGB channel and weighting them, 0.2126 for red, 0.7152 for green, 0.0722 for blue. These weights approximate how bright each colour component appears to human eyes.
You do not have to calculate this by hand. Every contrast checker tool implements it. The Chrome DevTools inspector shows contrast ratio directly on any text element. Figma’s built-in accessibility plugin flags violations in real time.
Specific failure patterns
The contrast violations that actually get shipped to production share a handful of patterns. Watch for these.
Grey text on white. #999999 on #FFFFFF is 2.85:1. Fails AA body-text. A lot of “placeholder” styles and “secondary text” styles are this colour or lighter. Push secondary text to at least #767676 (4.54:1) for AA compliance.
Light blue links. #5DADE2 on #FFFFFF is 2.6:1. The “cheerful pale blue” look from circa 2014 website design has not aged well. Modern links should be at least #0055CC on white.
Placeholder inside input fields. Browsers default placeholder text to around #808080 at 50-60% opacity. On a white field this is often 2.5:1 or less. Users with low vision report losing track of what fields are asking them to enter.
Red error text on white backgrounds. A typical “danger red” like #FF3B30 is only 3.2:1 on white. Most colour systems need to darken error reds substantially to pass AA. #CC1414 is a better starting point.
Button hover states. A light blue primary button at rest might pass 4.5:1, but the “lighter on hover” variant often dips below. Test every state, not just the default.
Tools that pay for themselves
Three classes of tool catch most accessibility problems before they ship.
Automated contrast checkers. Chrome DevTools (built in, free), Axe DevTools (free browser extension), Stark (Figma plugin). Run them on every screen. They will not catch everything, but they will catch the egregious violations.
Colour blindness simulators. Coblis (free web tool), Stark (also does this), the built-in Chrome DevTools rendering simulator. Load your product with deuteranomaly simulation turned on. If you cannot tell success from error, your users cannot either.
Real-user testing. If your team has the budget, paid user-testing services (UserTesting, Maze, Userlytics) can filter participants by disability type. Watch three or four users with colour vision deficiency try to complete common tasks in your product. This is the most expensive and the most valuable layer of testing.
The design-system move
The most efficient way to handle accessibility is to bake it into your design tokens from day one. Instead of “we have a red and a green for errors and successes,” you have “we have an error token (high-contrast red + warning icon + error label) and a success token (high-contrast green + checkmark icon + success label).” The tokens are always used together. The designer cannot accidentally ship an uncommunicative colour-only version because the token itself enforces the icon.
This is more work upfront. It saves a staggering amount of remediation work downstream. Teams that retrofit accessibility after launch spend 10–100× more effort than teams that build it in from the start. This is a well-documented pattern in accessibility research.
Legal reality check
If your product is sold in the United States and you have not met WCAG 2.1 Level AA, you are exposed to ADA litigation. The US plaintiffs’ bar has built an active practice around serial-filing accessibility lawsuits against commercial websites, 2024 saw over 4,000 such cases in federal court. The typical settlement runs 30,000 to 100,000 dollars, and a remediation mandate. Insurance coverage is patchy.
The European Accessibility Act, which came fully into force in 2025, imposes similar obligations on companies selling digital products to EU consumers. Enforcement is newer and the penalty regime varies by country, but the trajectory is the same as the US: measurable, auditable, enforceable.
Canada’s Accessible Canada Act applies to federally regulated sectors (banking, telecoms, transportation). Provinces have their own laws. Ontario’s AODA has been in force since 2005 and applies WCAG 2.0 AA (a slightly older version) to most commercial websites.
You are not building accessibility because it is nice. You are building it because it is the law and also because one in 25 of your users needs it.
A working checklist
For every colour pair in your product, verify:
- The contrast ratio meets at least 4.5:1 for text, 3:1 for UI.
- The combination is distinguishable under deuteranomaly simulation.
- Any meaning carried by the colour is also carried by an icon, label, or other non-colour cue.
- Every interactive state (hover, active, disabled, focus) meets the same thresholds, not just the default state.
If you do this once when designing the system, and then audit each quarterly release against it, you will ship products that work for substantially more of your audience than most products do.
Which, beyond the legal argument, is the point. Colour is communication. If the communication fails for one in 25 people, the design has not really succeeded. Fix the design.