Color blindness and landing pages: don't lose 8% of your visitors to a color choice

An "in stock" badge in green, an "out of stock" badge in red, placed side by side with no other visual difference between them. For most visitors, the distinction is instant. For nearly one man in twelve, the two badges look almost identical — and the information they were meant to convey simply disappears, with no error showing up anywhere, no signal alerting anyone on the team that built the page. That's the problem with color blindness on a landing page: it never breaks anything visibly, it just silently removes information from part of your traffic.

What research says about the prevalence of color blindness

The number often surprises people with how high it is: according to the landmark review by Michael P. Simunovic, "Colour Vision Deficiency", published in 2010 in the journal Eye, congenital color vision deficiency affects up to 8% of men and 0.5% of women — a gap explained by the X-linked recessive inheritance of the most common forms. Contrary to the "seeing in black and white" image the term "color blindness" wrongly evokes, the vast majority of cases involve difficulty distinguishing certain shades of red, green, orange, and brown from one another — exactly the palette most commonly used in interface design to encode success, error, urgency, or availability.

On a typical B2B audience, where technical decision-makers and buyers skew statistically male, this represents a share of visitors directly comparable in size to any segment you'd deliberately target elsewhere — except this one never fills out a segmentation form and stays completely invisible in Google Analytics.

Why "make the color more vivid" doesn't fix it

The most common reflex once the problem is identified is to intensify the color: a more saturated red, a bolder green, betting that the difference will become perceptible to everyone. A study published in 2023 in PLOS ONE by Amithavikram R. Hathibelagal, "The Impact of Display Saturation on Visual Search Performance in Congenital Colour Vision Deficiency", tested exactly this assumption: among participants with normal color vision, increasing saturation clearly improved visual search speed; among color-blind participants, the study found no significant improvement between the original image and its higher-saturation version. In other words, pushing the saturation slider fixes nothing for the people actually affected — it only sharpens the contrast for those who didn't need it. The only correction that genuinely works is adding a second information channel, independent of hue.

Where on a landing page color carries the message alone

This flaw rarely shows up in a single, isolated color choice — it appears every time a functional distinction relies entirely on hue, with no text, icon, or shape backing it up:

• Availability badges — "in stock" in green and "out of stock" or "low stock" in red, often identical in size and shape, where color alone tells the two states apart.
• Form validation — a field outline that simply switches from gray to red on error, with no icon or explicit message right next to it (see our guide on real-time form validation).
• Pricing tables that highlight the recommended plan with just a thin border or a green background, with no text badge like "most popular" — the compromise effect it's meant to create disappears for part of your visitors, a trap covered in our article on pricing tables and the compromise effect.
• Urgency counters and progress bars — a bar that shifts from green to orange to red as stock or an offer runs out, with no numeric indication accompanying the color change.
• "Before / after" or comparison charts — two lines or two bars distinguished only by hue, with no pattern, line thickness, or label to tell them apart another way.

The fix: always pair color with a second signal

The rule that resolves most cases fits in one sentence: color can reinforce information, but it must never be the only way to convey it. In practice, that means a few simple habits on every element using the red/green code:

• Add a distinct icon or symbol — a checkmark for availability, a cross or exclamation mark for an error or stock-out, recognizable even in grayscale.
• Add a word — "In stock" or "Out of stock" spelled out next to the colored badge, rather than letting color alone carry the whole message.
• Vary shape, not just hue — on a chart, a solid line against a dashed one, a hatched pattern against a solid fill, a square marker against a round one.
• Guarantee sufficient contrast on every state — a text/background contrast ratio of at least 4.5:1 (the WCAG standard), which benefits every form of visual impairment, not just color blindness; our guide to building an accessible landing page (RGAA, WCAG) covers the verification method in detail.
• Avoid placing bright red directly next to bright green with no separation or border — the combination hardest to tell apart for the most common forms of color blindness (deuteranomaly and protanomaly).

Testing your landing page in a few minutes

You don't need a user panel to catch the most obvious weak spots. Three quick checks are enough before publishing:

1. Turn on a color-blindness simulator — the "Rendering" tab in Chrome or Firefox DevTools offers a built-in emulation of vision deficiencies ("Vision deficiencies"), no extension required.
2. Convert the page to grayscale (screenshot plus a desaturation filter): if two elements meant to carry different information become indistinguishable, they were relying on hue alone.
3. Get a quick read from someone affected in your professional circle, if the opportunity comes up — no simulator replaces a real reaction, but it helps prioritize which fixes matter most before going further.

Common mistakes

• Confusing color blindness with total color blindness — full achromatopsia is extremely rare; the vast majority of cases involve difficulty distinguishing certain shades, not a total absence of color perception, which makes the problem easy to underestimate visually from the inside.
• Testing only within the team — statistically, on a small or predominantly female design team, the odds that someone color-blind is present and flags the issue before launch stay low.
• Fixing the main CTA and forgetting the rest of the page — status badges, forms, and comparison tables are statistically more often at fault than the call-to-action button, already covered extensively in our article on CTA button color.
• Relying on saturation alone — as the 2023 study cited above shows, this reflex delivers no measured benefit for color-blind visitors, only a sharper contrast for everyone else.

Designing so that no information ever rests on color alone costs nothing extra at design time — a word, an icon, a shape is enough — and never takes anything away from readability for the rest of your traffic. The 10 LanderKit templates (€89 per template, €229 for the full pack) consistently pair icons and text labels with their status badges and form states, never encoding information through hue alone: you can check it directly on the pricing table of the SaaS waitlist template or the availability badges of the e-commerce product template.