A red error border and a green success border look completely different to most people. To someone with red-green color blindness, they can look nearly identical — which means an entire feedback system some team spent weeks polishing quietly stops working for a meaningful chunk of users. This isn't a rare edge case. It's one of the most common accessibility failures in software, and almost every instance of it has a simple fix once you know what to look for.
What color blindness actually changes
The name is a little misleading. Most color blindness isn't seeing the world in gray — it's a reduced ability to distinguish between specific pairs of hues that look obviously different to everyone else. Deuteranomaly and protanomaly (the two forms of red-green color blindness) are by far the most common, making reds, greens, browns, and oranges easy to confuse with each other. Tritanomaly is rarer and affects blue-yellow distinction instead. Full monochromacy — seeing no color at all — exists, but it's genuinely uncommon.
The scale of this is easy to underestimate. Red-green color blindness affects roughly 1 in 12 men and 1 in 200 women. On a product with any meaningful user base, that's not an edge case worth deprioritizing — it's a predictable, sizable group hitting the same broken pattern every single day.
The one rule that fixes most of this
Almost every color-blindness failure in UI design comes down to the same root cause: using color as the only way to communicate something. The fix isn't to avoid color, it's to never let color carry meaning alone. Pair it with an icon, a label, a shape, a position, or a pattern, and the color becomes a helpful bonus signal instead of the single point of failure. Everything below is really just this one idea applied to different UI patterns.
Example: form validation
The problem: a form field gets a thin red outline on error and a thin green outline when valid, with no other visual difference. To someone with deuteranomaly, those two outlines can look like the same muted brown-ish tone, which means there's no reliable way to tell which fields actually failed validation.
The fix: add an icon next to the field — a warning triangle or an "x" for errors, a checkmark for success — and show actual error text underneath, not just a color change on the border. The color still reinforces the state for people who can see it clearly, but nothing depends on it alone anymore.
Example: status badges and tags
The problem: a project management tool shows task status as colored dots — red for blocked, yellow for in progress, green for done — with no text label, just the dot. Someone with red-green color blindness is now guessing at task status from a UI that was specifically designed to make status obvious at a glance.
The fix: keep the colored dot if you want, but add the status word next to it, or use genuinely different shapes — a filled circle, a half-filled circle, an empty circle — so the distinction survives even if the colors themselves get confused.
Example: charts and data visualization
The problem: a line chart plots five different metrics using five different colors, distinguished only by a legend on the side. Once two of those lines cross or run close together, someone with color vision deficiency has no reliable way to tell which line is which, especially if any of the five colors are close in hue.
The fix: vary line style along with color — solid, dashed, dotted — and label lines directly at their endpoint instead of relying purely on a separate legend. For diverging data specifically (values going up versus down), swap the classic red/green pairing for blue/orange, which stays visually distinct across every common type of color blindness, not just for people with typical color vision.
Example: links inside body text
The problem: a paragraph has an inline link styled only in a different color from the surrounding text, no underline, no weight change. If that color shift happens to sit in the red-green range and the surrounding text is a similar tone, the link effectively disappears for anyone who can't distinguish the two hues.
The fix: underline links, or at minimum change the font weight alongside the color. This one's such a well-known fix at this point that most modern design systems do it by default — but it's still worth checking, since it's easy to accidentally strip in the name of a "cleaner" look.
Picking colors that hold up across color vision types
Beyond pairing color with a second signal, some color choices are just inherently more resilient. Blue and orange stay distinguishable across nearly every type of color blindness, which is why it's become the go-to substitute for red/green in charts and diverging scales. Varying lightness, not just hue, also helps enormously — two colors that are hard to tell apart by hue alone are often still distinguishable if one is noticeably lighter or darker than the other, since lightness contrast survives color vision deficiency in a way pure hue differences don't.
A quick sanity check that costs nothing: view your design in grayscale. If two colors you're relying on to mean different things turn into the same shade of gray, they were probably too close in lightness to begin with, and a meaningful number of your users are seeing something close to that grayscale version already.
Testing this before it ships, not after
Color blindness simulators are the fastest way to catch this — browser extensions and design tool plugins that show you your actual interface filtered through deuteranopia, protanopia, or tritanopia in a couple of clicks. Run your key screens through one before calling a design done, the same way you'd run a contrast checker. It usually takes less time than writing this paragraph did, and it catches the kind of failure that's genuinely hard to spot by just looking at your own design with typical color vision.
Mistakes worth double-checking for
- Using red and green as the sole differentiator for any binary state — error/success, on/off, blocked/done — without a secondary cue.
- Building charts with a color-only legend and no direct labeling, pattern variation, or line-style differences.
- Styling links with color alone, especially inside paragraphs where the surrounding text color sits close in hue.
- Assuming a design is fine because it looks fine to the person who designed it — color vision deficiency isn't something you can eyeball your way around.
Questions that come up around this
Do color-blind people just see everything in gray?
Almost never — total color blindness (monochromacy) is extremely rare. Most color blindness is a reduced ability to distinguish between specific hues, most commonly reds and greens looking similar to each other, not an absence of color entirely.
Is red-green color blindness really that common?
Yes, more than most people expect. Red-green color blindness affects roughly 1 in 12 men and 1 in 200 women, which on any reasonably sized product adds up to a real, non-trivial share of your users.
Can I still use red and green in my UI at all?
Yes, just not as the only signal. Red and green error/success states are fine as long as they're also carrying an icon, label, or shape difference — the color becomes a bonus cue instead of the only one.
What's the fastest way to check if my design has a problem?
Run it through a color blindness simulator — there are free browser extensions and design tool plugins that show you exactly how your interface looks under different types of color vision deficiency. It takes seconds and catches most issues immediately.
Does this only matter for charts and data visualization?
No, it shows up everywhere — form validation, status badges, links, toggle states, map pins, calendar categories. Charts get the most attention because the failures are visually obvious, but the same underlying mistake happens in plain UI just as often.
Color as a bonus signal, not the only one
None of this asks you to give up color, and it definitely doesn't ask you to avoid red and green entirely. It's a much smaller shift than it sounds: whatever a color is currently communicating on its own, back it up with an icon, a label, a shape, or a pattern, so the message still lands for the meaningful share of users who can't rely on hue the same way everyone else does.
Run your next design through a color blindness simulator before shipping it — it takes a couple of minutes and it's one of the highest-leverage accessibility checks you can do for the time it costs.