Designing for Color Blindness: A Practical Guide for Non-Designers

About 1 in 12 men and 1 in 200 women have some form of color blindness. If your designs rely on color alone to communicate, you're losing a meaningful chunk of your audience. Here's how to fix it.

Color blindness isn't seeing in black and white — it's seeing certain color pairs as nearly identical. Red and green look the same. Or blue and purple. Or yellow and light green. For roughly 8% of men and 0.5% of women globally, these confusions are constant. Most "accessible" design conversations skip past this in favor of contrast ratios, but designing for color-blind users is a separate and equally important practice. Here's the practical version.

The Three Most Common Types

Deuteranopia and protanopia (red-green color blindness) account for the vast majority of cases — affected users struggle to distinguish reds from greens, especially at medium saturation. Tritanopia (blue-yellow) is rarer but real, and affects how users perceive blues, greens, and yellows. Achromatopsia (full color blindness, seeing in grayscale only) is very rare but worth designing for in critical UI. The practical implication: any design that uses red-vs-green or blue-vs-yellow as the only difference between two pieces of information will fail for a meaningful slice of your audience.

The "Never Color Alone" Rule

The single most useful principle in color-blind accessibility: color should never be the only signal carrying information. Red error text needs an icon (warning triangle, X). Green success states need a checkmark. Charts with multiple lines need not just different colors but also different line styles (solid, dashed, dotted) or shape markers (circles, squares, triangles). Status indicators (online/offline, urgent/normal) need labels or icons in addition to color. This single rule, applied consistently, fixes most color-blindness failures without changing your palette.

Test Your Palette With a Simulator

Most modern browsers include a color-blindness simulator in DevTools (Chrome: Rendering panel → Emulate vision deficiencies). Toggle through deuteranopia and protanopia on your site or design — if the simulated view collapses two of your brand colors into the same value, those two colors carry no information for those users. The fix is usually to vary lightness, not just hue. A deep red and a pale green that looked clearly different in your normal view will still be distinguishable in the simulator, because they differ in lightness as well as hue.

Build a Color-Blind-Safe Palette From the Start

The easiest path is to extract or build a palette that already has good lightness variation between colors. Run your palette through Palette Health to surface contrast issues — pairs that pass WCAG contrast also tend to remain distinguishable under color-blindness simulation, because contrast comes from lightness difference, which is exactly what color-blind users can still perceive. Combine the contrast check with the "never color alone" rule and you've eliminated the two most common failure modes.

Specific Color Pairs to Avoid (And Their Safer Substitutes)

Three combinations cause the most color-blindness failures, and each has a clean substitution. (1) Red and green at similar saturation (the classic stoplight problem). Substitute: red and blue. Blue is distinguishable from red for almost all forms of color blindness, while green often isn't. Most modern data dashboards use blue/orange or red/blue precisely for this reason. (2) Blue and purple as adjacent chart series. Substitute: blue and yellow-orange, or blue with significant lightness shift between adjacent series. (3) Green and brown in nature-themed palettes. Substitute: vary lightness aggressively — a deep forest green next to a pale tan is fine; a mid-green next to a mid-brown is a problem. Run your palette through ColorSense first, then verify the pairs in the contrast checker — if a pair passes 4.5:1 contrast, it's almost always distinguishable under color-blindness simulation too, because contrast comes from the lightness difference color-blind users can still see.

Build Accessibility Into the Design Process, Not the Audit

The teams that ship genuinely color-blind-safe products don't do it through end-of-cycle accessibility audits — they bake it into the design process itself. Three practical habits: (1) Every new palette gets simulator-tested in Chrome DevTools before it's locked. (2) Every status indicator, chart, and form-state design gets reviewed against the "never color alone" rule by a designer who didn't make it. (3) Every brand kit document includes color-blindness notes — which colors look identical under deuteranopia, which alternative cues are required when those colors appear together. Document this in your Brand Kit with explicit "use this icon alongside this color" pairings. Pair the palette with the Palette Maker to generate color-blind-safe lightness variants when your existing palette has problematic pairs — usually the fix is a deeper or lighter variant of the same hue, not a new color.

Extract a palette in seconds — no signup

Upload any image and ColorSense pulls 5 vibrant brand-ready colors with HEX, RGB, and HSL codes. Free, unlimited, no account required.

Open ColorSense →