Designing for Color Blindness — A Practical Guide

Color blindness (more accurately called color vision deficiency or CVD) affects how people perceive certain wavelengths of light. It's not seeing in black and white — most color blind people see colors, just a reduced range. The type and severity determine which colors are confused.

Protanopia (red-blind) — The red cones are missing or non-functional. Reds appear dark and can be confused with greens, browns, and blacks. About 1% of men are affected.

Deuteranopia (green-blind) — The green cones are missing. Greens and reds are confused, similar to protanopia but without the darkening of reds. About 1% of men. Deuteranomaly (partial green deficiency) affects another 5% of men, making it the most common form overall.

Tritanopia (blue-blind) — The blue cones are missing. Blues and yellows are confused. Much rarer, affecting about 0.01% of people regardless of sex.

Achromatopsia (total color blindness) — No functioning cone cells. Vision is entirely in shades of gray. Extremely rare, affecting roughly 1 in 30,000 people.

The numbers add up: approximately 8% of men and 0.5% of women have some form of color vision deficiency. For a website with 100,000 visitors, that's roughly 4,000 people who experience your colors differently than you intend. Designing for them isn't an edge case — it's designing for a meaningful portion of your audience.

Color vision deficiency is remarkably common, yet it's overlooked in most design processes. Let's put the numbers in context:

• 1 in 12 men (8%) has some form of CVD. In a meeting of 10 people, there's a good chance someone sees your design differently than you do.
• Red-green deficiency accounts for 99% of cases. This is why red/green color coding (like "red for error, green for success") is the single most problematic pattern in UI design.
• The most common form is deuteranomaly (5% of men) — partial green deficiency. People with this condition can often distinguish red from green, but with difficulty, especially in small sizes or low contrast.
• Complete color blindness is extremely rare. Almost all color blind people see a range of colors. The issue is distinguishing between specific pairs, not seeing no color at all.

These statistics have direct business impact. If your e-commerce site uses red/green to indicate in-stock/out-of-stock, or your dashboard uses color-only indicators for status, 8% of male users will struggle. In B2B software where decisions are made from dashboards, this can mean misread data and bad decisions.

Designing for color blindness doesn't mean avoiding color — it means not relying on color alone. Here are practical guidelines:

Never use color as the sole indicator. This is WCAG Success Criterion 1.4.1, and it's the most important rule. If something is communicated through color, also communicate it through text, icons, patterns, or position. Error messages: don't just turn the border red — add an error icon and text. Success states: don't just show green — add a checkmark.

Avoid problematic color pairs. The most commonly confused pairs:

• Red and green (the most problematic pair by far)
• Red and brown
• Green and brown
• Blue and purple
• Light green and yellow

Use high contrast between meaningful colors. Even if two colors are distinguishable for someone with normal vision, they may merge for someone with CVD. Increasing the lightness contrast between colors (one clearly lighter, one clearly darker) helps because brightness perception is unaffected by most types of color blindness.

Use patterns and textures in data visualization. Charts that rely on color legends are problematic. Add patterns (stripes, dots, crosshatch) to distinguish data series. Most charting libraries support this, but it's rarely the default.

Label directly. Instead of a color legend that requires matching colors, label data series directly on or next to the data. This helps everyone, not just color blind users.

The best way to catch color accessibility issues is to see your design as color blind users see it. Several tools simulate different types of CVD:

Browser-based simulators like Guten's Color Blindness Simulator let you upload images or enter color palettes and see them through each type of CVD. This is the fastest way to check whether your color choices are distinguishable.

Browser DevTools — Chrome DevTools has a built-in vision deficiency simulator. Open DevTools, click the three dots in the Rendering panel, and select "Emulate vision deficiencies." This applies the simulation to the entire page in real-time, including animations and interactive elements.

OS-level filters — Both macOS (Settings > Accessibility > Display > Color Filters) and Windows (Settings > Ease of Access > Color filters) can simulate color blindness system-wide. This lets you browse your entire site naturally and notice issues you'd miss testing individual pages.

Design tool plugins — Figma, Sketch, and Adobe XD all have plugins that simulate CVD directly in your design files. Testing during the design phase catches problems before any code is written.

The key is to test with all major types (protanopia, deuteranopia, tritanopia) and for all meaningful visual distinctions in your design. Focus especially on areas where color conveys status, categories, or differences between elements.

Truly accessible design goes beyond accommodating color blindness. It means building systems where color is enriching but never essential:

Use icons with meaning. A red octagon means stop even in grayscale. A checkmark means success. An exclamation mark means warning. Icons carry meaning independent of color. Pair them with your color coding and every user benefits — color blind users get the icon, sighted users get the reinforcement, screen reader users get the alt text.

Design for grayscale. If your design works in grayscale (all hue information removed), it works for every type of color blindness. This is a powerful quick test: take a screenshot, convert to grayscale, and see if all the information is still clear. If categories blend together or status indicators disappear, you have a color dependency.

Use texture, shape, and position. In charts, use different line styles (solid, dashed, dotted) and marker shapes (circle, square, triangle) in addition to color. In status systems, use position (top = active, bottom = inactive) or shape (circle = in progress, checkmark = complete) alongside color.

Write clear labels. "Red items are urgent" forces users to identify the color. "Items marked URGENT require immediate attention" works for everyone. Explicit text labels eliminate the need to perceive or interpret any visual attribute.

Test with real users. Simulation tools are excellent for development, but nothing replaces feedback from actual color blind users. If your team doesn't include someone with CVD, consider it in user testing recruitment. Their perspective will reveal issues that simulations and guidelines miss.