Your Color Palette Is Ghosting 8% of Your Users

Pop quiz: what color is your error state? If you answered “red,” follow-up question: how does it look to the 8% of men who can’t distinguish red from green?

If you just went “oh no,” welcome to the party. Let’s fix it.

Color Blindness Isn’t What You Think It Is

First, forget everything movies taught you. Most people with color vision deficiency don’t see in black and white. It’s more nuanced than that, and more common than left-handedness.

The main types:

Deuteranopia (green-weak) affects about 6% of males. It’s the most common one by far.
Protanopia (red-weak) makes reds look muddy and dark.
Tritanopia (blue-weak) is rare but real.
Achromatopsia (full monochrome vision) is very rare.

Here’s the kicker: your beautiful red error message? Invisible to someone with protanopia. Your green “success!” badge? It blends right into the background for someone with deuteranopia. You’re essentially making some users play your interface on hard mode.

The Numbers Game: Contrast Ratios

WCAG spells out the minimum contrast ratios, and they’re worth memorizing:

AA standard: 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular)
AAA standard: 7:1 for normal text, 4.5:1 for large text

“But it looks fine on my monitor!” Cool. Your monitor probably cost more than some users’ entire computer. Test with a color contrast checker and let the math decide. You’ll be surprised how many “obviously readable” combinations fail.

See Through Someone Else’s Eyes

The single best thing you can do is look at your design through a color blindness simulator. It transforms your colors to show exactly what different users see.

Pay special attention to:

Red/green combos anywhere in your UI (the most common failure by far)
Charts and data visualizations (if your pie chart becomes a mystery circle, you have a problem)
Form validation (is “error” vs “success” only communicated by color?)
Navigation states (can users tell which tab is active?)
CTAs (does your button actually stand out, or does it vanish?)

This isn’t a one-time test. Check every major design change.

Building an Accessible Palette From Scratch

Rather than fixing accessibility problems after the fact (expensive, annoying), bake it in from the start.

Use a color palette generator to explore harmonious combinations, then test every combo for contrast before you commit.

The golden rules:

Never use color as the only signal. Add text labels, icons, or patterns. A checkmark says “success” regardless of what color it is.
Blue and orange work well together for nearly all types of color vision. Red and green? That’s playing with fire.
Rely on light/dark differences, not just hue differences. If you squint and everything blurs together, so does it for someone with CVD.
Add borders or outlines to colored elements. They’re the safety net when color perception shifts.
The grayscale test: Convert your design to grayscale. If you can still tell everything apart, you’re golden.

Quick Wins You Can Ship Today

Underline your links. Don’t just color them blue and hope for the best.
Add icons to status badges. Checkmark for success, X for error. The color becomes bonus info, not the only info.
Use patterns or labels in charts, not just different colored slices.
Offer a high-contrast mode toggle. Some users need it. All users appreciate it.

This Benefits Everyone

Here’s the thing: accessible design isn’t charity. High-contrast text is easier to read in sunlight. Clear visual hierarchy helps everyone scan faster. Redundant visual cues reduce cognitive load for all users, not just those with CVD.

The b2kit design tools let you test contrast, simulate deficiencies, and build accessible palettes right in your browser. For teams that need full WCAG auditing alongside their SEO workflow, SCOUTb2 has you covered.

Design for the 8%. Improve it for the 100%.