Color blindness affects around 1 in 12 men and 1 in 200 women — which means that on any reasonably-sized website or app, a meaningful share of your users see color differently than you do. And yet color is still routinely used as the sole way to convey status, distinguish categories, or signal errors. The fix is not to avoid color, but to stop treating it as the only tool available.
It helps to understand what you are designing for
Color blindness is not one thing. Knowing the main variations helps you anticipate where problems are most likely to occur:
- Red-green color blindness (protanopia and deuteranopia) is by far the most common, making it difficult to distinguish reds, greens, and browns from one another.
- Blue-yellow color blindness (tritanopia) is rarer, affecting the ability to tell blues from greens and yellows from violets.
- Anomalous trichromacy — weakened rather than absent color perception — is more common than full color blindness and covers deuteranomaly, protanomaly, and tritanomaly.
- Achromatopsia, where someone sees only in greyscale, is rare but worth understanding.
Red-green combinations are the most common source of confusion, so they are the most important to address first.
Color alone is never enough
This is the foundational rule, and it maps directly to WCAG 1.4.1. If a piece of information is only communicated through color, a significant portion of your users will miss it:
- Status indicators — success, warning, error — need an icon or text label alongside the color.
- Form validation cannot rely solely on red and green borders. Include a message and a symbol.
- Charts that distinguish categories by color must also use patterns, textures, or direct labels.
- Links in body text should be underlined or otherwise visually distinguished beyond their color.
Some color combinations cause more problems than others
Choosing your palette thoughtfully goes a long way:
- The classic problem pairing is red and green — avoid using these as the primary way to distinguish two states or categories.
- Blue and orange is a well-established, color-blind-friendly alternative for two-category distinctions.
- Differences in lightness and saturation create distinction that is visible regardless of color perception — rely on these alongside hue.
- ColorBrewer palettes are designed specifically for accessible data visualization and are a reliable reference for charts and maps.
Add non-color cues to carry the meaning
When you layer in additional visual cues, your design becomes resilient — it works even if the color information is lost entirely:
- Apply distinct patterns or textures to chart segments and map regions rather than relying on fill color alone.
- Use consistent icons to reinforce meaning — a checkmark for success, an X for error, an exclamation mark for a warning.
- Label data directly on charts where possible rather than requiring users to cross-reference a legend.
- UI states like selected, active, or disabled should be communicated through shape, border weight, or opacity, not just color change.
Test before you call it done
It is surprisingly easy to build a color-dependent design without realising it. Testing specifically for color blindness catches these issues before users do:
- Apply a greyscale filter to your design — if any information disappears, you have a color dependency problem.
- Use browser extensions like Colorblinding or Spectrum to simulate different types of color vision deficiency on live pages.
- Share designs with users who have color blindness — their feedback will surface issues simulations can miss.
- Do this during the design phase, not after development — it is much easier to adjust a palette than to rework coded components.
Tools worth knowing
- Coblis: Upload any image to preview how it appears across different types of color blindness.
- Color Oracle: A free desktop app that applies real-time full-screen color blindness filters.
- Adobe Color: Includes an accessibility mode for checking color combinations.
- Stark (Figma plugin): Contrast checking and color blindness simulation built directly into your design workflow.
Seeing it differently
Designing for color blindness is less about restriction and more about discipline. When you stop leaning on color as a crutch, your visual communication tends to get clearer and more deliberate for everyone. The users who experience color vision deficiency benefit most directly, but the whole audience benefits from designs that communicate through multiple channels rather than just one.