Most designers choose red for “wrong” and green for “right” without thinking twice, because the pairing feels universal. For a noticeable share of your visitors, it is not. Red and green color blindness changes how those two colors look, and in many interfaces the difference between a success message and an error disappears completely. I run into this often when auditing forms, dashboards and pricing tables, and the cause is almost never carelessness. The colors looked clear on the designer’s screen, so nobody questioned them.
This post explains what people with red and green color blindness actually see, where the pairing breaks on real websites, what the accessibility guidelines require, and how to test and repair your own colors without turning the design grey.
Can People With Red and Green Color Blindness Tell Red and Green Apart on a Website?
Often they cannot, at least not by color alone. Depending on the type and severity of the deficiency, a saturated red and a medium green can land very close together and read as similar muddy olive, brown or yellow tones. When the only signal that separates “error” from “success” is that color difference, some visitors are guessing.
The word “often” matters, though. Color vision deficiency is a spectrum. Some people confuse only certain shades, some confuse many, and a smaller group sees almost no difference. That variation is exactly why you cannot settle the question by asking one colleague with color blindness to glance at your page. One person’s experience does not stand in for the whole range.
What you can say with confidence is this: if red and green are the only thing distinguishing two states, you have a risk. If red and green are paired with a label, an icon or a pattern, the risk mostly goes away. The rest of this post is about getting from the first situation to the second.
How Common Is Red and Green Color Blindness Among Your Visitors?
It is common enough that it will show up in your analytics even if you never see it. The National Eye Institute notes that about 1 in 12 men have color vision deficiency, and that the most common type makes it hard to tell the difference between red and green. Women are affected far less often, because the most common forms are carried on the X chromosome and are inherited differently.
Take a site with 10,000 monthly visitors and an audience split roughly evenly between men and women. On those numbers alone, several hundred people could be reading your interface with some level of red-green deficiency. For a store, a SaaS dashboard or a booking form, that is a real group of users, not an edge case.
There is a second reason the number understates the problem. The same institute explains that symptoms are often so mild that they are hard to notice, so many people with color vision deficiency do not know they have it. Those visitors will not request an accessible version or send you a complaint. They will simply misread a status, hesitate, or leave. You will not get feedback about it.
What Red and Green Look Like to Someone With Red-Green Color Vision Deficiency
People with red-green deficiency usually see red and green shifted toward the same family of dull yellow, olive or brown tones. The exact appearance depends on which cone type is affected and by how much.
Two broad groups cover most cases. Protan types involve the cones that respond to longer wavelengths, so reds can look darker and less vivid, and sometimes close to green or even black. Deutan types involve the middle-wavelength cones, so greens can lean toward red or tan and lose their distinctiveness. Within each group, the “anomaly” forms (protanomaly and deuteranomaly) are a weaker version of the “anopia” forms (protanopia and deuteranopia), where the difference is largest.
A useful mental picture comes from a color-accessibility walkthrough that compares a rainbow under several simulated conditions. For viewers with the two most common deficiencies, red appears as a dark olive green, and orange and green end up as similar shades of yellow-green. If you imagine your red button and green button both turning that same olive, you have a fair sense of the problem.
Brightness is the other half of the story. Many people with red-green deficiency still perceive differences in lightness fairly well. That is why two colors that differ in how light or dark they are stay separable, while two colors with the same lightness and different hue become nearly identical. I will come back to this in the fixing section, because it is the most practical lever you have.
Where Red and Green Break Down in Real Interfaces
The pairing fails wherever color alone carries a status or a choice. In my audits, the same handful of patterns show up repeatedly.
Form validation. A red border for an invalid field and a green border for a valid one is the classic case. If the error text is vague or missing, a user with red-green deficiency may not know which fields need attention. Accessibility testing materials list identifying required or error fields using color differences only as a known failure pattern.
Status badges and dashboards. “Active” in green, “Failed” in red, “Pending” in orange. A table full of small pill-shaped badges that differ only by hue is hard to scan when green, red and orange converge toward the same tone.
Charts and graphs. Line charts with one red series and one green series, bar charts with red for decline and green for growth, and heat maps running from red to green are all common. These are also the cases where the person cannot fall back on a label, because the legend is often color-keyed too.
Links inside body text. Links styled only by a green or red color change, with no underline, depend entirely on the viewer noticing that the text shade differs from its neighbors. Red-green deficiency makes that harder.
Availability and calendars. Booking widgets that show open slots in green and full slots in red leave users unsure which dates they can actually pick.
Strength meters and progress indicators. Password meters that move from red to green, and “stop and go” style progress bars, tell the user nothing if the two ends look alike.
None of these designs are wrong because they use red and green. They are weak because color is the only carrier of the meaning.
What the Web Content Accessibility Guidelines Say About Color-Only Information
WCAG Success Criterion 1.4.1, called Use of Color, is a Level A requirement. In plain terms, color cannot be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Level A is the baseline tier, so this is not an advanced or optional recommendation.
The criterion does not tell you to stop using color. The W3C explanation is explicit that it should not discourage using color on a page, or even color coding, as long as it is complemented by another visual indication. A green checkmark icon next to the word “Saved” in green text satisfies the intent. A bare green dot does not.
The W3C’s own explanation, Understanding SC 1.4.1 Use of Color, also lists common failures, including identifying required or error fields using color differences only, and creating links that are not visually evident without color vision. Read those two items against your own site and you will probably spot a candidate or two.
It is worth keeping this criterion separate from contrast. Contrast requirements govern how readable text and key interface components are against their background. They do not, on their own, guarantee that two different colors can be told apart from each other. A page can pass text contrast everywhere and still fail 1.4.1 if its states differ only by hue. You need to check both.
How to Test Whether Your Red and Green Are Distinguishable
The fastest test is to look at your own design the way a person with a deficiency would. A color blindness simulator makes that possible without any special equipment. You can run a screenshot or palette through a color blindness simulator and compare the original and simulated versions side by side. Check at least one protan view and one deutan view, since the two do not look the same.
When you review the results, ask three plain questions. Can I still tell which fields are errors? Can I still match chart lines to the legend? Can I still read the status column without hovering over anything? If any answer is “not really,” you have found something to fix.
A second quick check is to convert the screen to greyscale. This removes hue completely and leaves only lightness, which is the information many red-green deficient viewers rely on. If your red and green turn into two identical greys, the colors depend on hue alone and will be unreliable for the viewers most affected.
A third check gives you a number. A color contrast checker calculates the luminance contrast ratio between two colors. I ran a few common pairs to see what the numbers look like:
- Pure red (#FF0000) against green (#008000) gives a ratio of about 1.28 to 1.
- A typical “material” red (#D32F2F) against a mid green (#388E3C) comes out near 1.21 to 1.
- A deep red (#B71C1C) against a light green (#81C784) rises to about 3.26 to 1.
The first two pairs are close to invisible in terms of lightness difference, which is why they blur together for affected viewers. The third pair keeps the hue difference and adds a clear gap in lightness, so it holds up much better. A ratio near 1 between two status colors is a warning sign even when the colors look obviously different to you.
The same tool is useful for the text itself. White text on #D32F2F measures about 4.98 to 1 and white on #2E7D32 about 5.13 to 1, both above the usual 4.5 to 1 target for normal-size text. So the labels inside those badges would be readable, even though the badges themselves are hard to separate from each other. That contrast between “readable text” and “distinguishable states” is the point of the previous section in practice.
How to Fix Red and Green Without Giving Up Color
Add a second signal, change the lightness gap, or swap the hue pair. Any one of these works, and the strongest fixes combine two.
Add a second signal. This is the most reliable fix and the one WCAG’s intent points to. Pair the color with an icon, a text label or a pattern. A red badge reads “Failed” with an X, a green badge reads “Active” with a checkmark. A red bar can be solid while a green bar uses diagonal stripes. Error messages should say what went wrong in words, positioned next to the field. This also helps people on monochrome displays, in bright sunlight, or with a washed-out screen.
Widen the lightness gap. If you want to keep red and green, make one of them clearly darker and the other clearly lighter. The earlier numbers show the effect: moving from roughly 1.2 to 1 up to roughly 3.3 to 1 gave the pair a visible brightness difference. Pastel pairs, where both colors are light and desaturated, tend to be the weakest, so soft tints of both are rarely a good idea.
Change the hue pair. Blue and orange are a common replacement for good vs bad, because blue and orange differ in ways that red-green deficient viewers can generally still perceive. The widely used Okabe-Ito palette includes a blue (#0072B2) and an orange (#E69F00), for example. Treat that as a starting point rather than a guarantee, and run it through the simulator like any other pair. That combination measures only about 2.3 to 1 in luminance contrast, so for small elements you may still want to darken one side or add an icon.
Use a color tool to find alternatives. If you are choosing a replacement for one half of the pair, a complementary color finder can suggest opposing colors on the wheel to work from. One caution: complementary does not automatically mean accessible. On the standard RGB wheel, the complement of red is a cyan-leaning color, which can work well, but you still need to verify the final pair in the simulator and the contrast checker before using it.
A Practical Checklist for Red and Green in Your Interface
Before shipping any screen that uses red and green, I run through a short list:
- Does every red or green state also have a text label or icon?
- If I convert the screen to greyscale, can I still tell the states apart?
- Have I viewed the design under at least one protan and one deutan simulation?
- Do the two colors differ clearly in lightness, not only in hue?
- Are error messages written out next to the field instead of relying on a red border?
- Are charts using direct labels, patterns or markers in addition to color?
- Are links in body text underlined or otherwise marked beyond color?
If you can answer yes to most of these, red and green color blindness is unlikely to break your interface. If several answers are no, start with the highest-traffic screens: login, checkout, forms and any dashboard people use daily.
Quick Answers About Red and Green Color Blindness in Web Design
Do I have to remove red and green from my website? No. The guideline asks for an additional cue, not for different colors. A red error with an icon and a clear message is fine.
Is dark mode safer for red-green deficiency? Not by default. Dark backgrounds change contrast, but two states that share the same lightness remain hard to separate on any background. Test both themes.
Will a greyscale check catch every problem? It catches the most common one, which is two colors with the same lightness. It will not tell you how a protan or deutan viewer actually experiences your page, so use it alongside a simulator.
Are colorblind-friendly palettes only for charts? No. They help anywhere color carries meaning: tags, alerts, maps, calendars, toggles and diagrams.
How often should I recheck? Whenever you change a brand color, add a new status or redesign a form. Palettes drift over time, and a new accent color can quietly reintroduce the problem.
What to Do With Red and Green on Your Site This Week
Start small. Open your most-used form and your most-used dashboard, run both through a simulator, and write down anywhere a state depends on color alone. Add an icon or label to each one, check the lightness gap with a contrast checker, and replace any pastel red and green pairs that look too close. That one pass will fix most of the exposure.
The underlying idea is simple. Color is a good way to reinforce a message and a poor way to carry it alone. When red and green are backed by words, shapes or a clear difference in brightness, the visitors in that 1 in 12 group can use your site as easily as everyone else, and so can the many people who do not yet know they are in it.
