When you design an interface, you're deciding who gets to use it and who doesn't. If you distinguish two states using only green and red, you're shutting out roughly 8% of the men and 0.5% of the women who see your product every day. That's not a niche concern: globally we're talking about more than 300 million people with some form of color vision deficiency, according to Colour Blind Awareness.
Yet color blindness is one of the most overlooked accessibility topics in digital design. This article gives you an operational guide: what actually happens inside a color blind person's eye, why the problem goes well beyond "red vs green", which principles to apply in your design work, and how to test whether an interface really works for everyone.
What you'll learn:
- The types of color blindness and how common they are
- Why color blindness is a design problem, not a medical one
- 5 principles for designing inclusive color interfaces
- Simulation and testing tools
- A practical checklist for your next project
What color blindness actually is (for designers)
Color blindness — technically color vision deficiency or CVD — is a retinal condition that reduces or eliminates the ability to distinguish certain color combinations. It's not a disease: it's a variant of human vision, typically inherited, permanent, and not correctable with glasses.
In a healthy human eye, color perception relies on three types of cones sensitive to red (L), green (M), and blue (S). When one of these cones works abnormally or is absent, the brain receives incomplete chromatic information.
The four main forms:
- Deuteranomaly and deuteranopia (altered or missing green cones): the most common form, affecting around 6% of men. Makes it hard to distinguish red, green, brown and gray.
- Protanomaly and protanopia (red cones): roughly 1% of men. Red looks dim and close to gray.
- Tritanomaly and tritanopia (blue cones): very rare, less than 0.01% of the population. Difficulty between blue and yellow.
- Achromatopsia (total color blindness): extremely rare, about 1 in 30,000. Vision is entirely in grayscale.
Bottom line: roughly 1 in 12 men and 1 in 200 women have some form of color blindness. In your next usability test with 10 male participants, statistically one of them is seeing your interface differently from how you designed it.
Why it's a design problem, not a user problem
The temptation to dismiss color blindness as an "edge case" is common and wrong. Three concrete reasons a professional designer needs to take it seriously:
It's a legal compliance requirement. The WCAG 2.2 guidelines at success criterion 1.4.1 ("Use of Color") state that color must not be the only means of conveying information. It's a Level A criterion, the minimum compliance threshold. In the US, the Americans with Disabilities Act (ADA) has repeatedly been applied to websites in federal court, and Section 508 makes WCAG AA mandatory for federal agencies and contractors. In the UK, the Equality Act 2010 and the Public Sector Bodies Accessibility Regulations 2018 require similar compliance. In the EU, the European Accessibility Act came into force on 28 June 2025 for most private-sector services.
It's economically material. 300 million users is a real market. An e-commerce interface that doesn't clearly distinguish "in stock" from "sold out" products loses concrete sales. A dashboard where a red value buried in a sea of green signals a critical issue you'll miss half the time isn't just inaccessible — it's broken.
It improves the experience for everyone. A design that works for a color blind person also works for someone staring at a screen in direct sunlight, someone with a badly calibrated monitor, someone who's tired, someone using dark mode. Accessibility is not a subset: it's a general quality accelerator.
The 5 principles for inclusive color design
1. Never rely on color alone to convey meaning
This is the golden rule. Every time color carries information (error, success, warning, active state, category), it must be paired with a second redundant signal: an icon, a text label, a pattern, a different shape.
Practical examples:
- Form validation: instead of "red border = error, green border = ok", add a ✕ and ✓ icon plus a text message under the field.
- Charts: instead of two lines one red and one green, use different dash patterns, different marker shapes (circle vs square), or direct line labels.
- Maps: instead of coloring regions by category, add patterns (diagonals, dots, grids) or labels.
GOV.UK and Google's Material design system apply this principle exemplarily: every error state has icon + color + text, always.
2. Meet WCAG AA contrast minimums
Contrast between text and background must meet at least WCAG 2.2 AA:
- 4.5:1 for normal text (under 18pt)
- 3:1 for large text (18pt+ or 14pt+ bold)
- 3:1 for non-text UI elements (icons, button borders, input fields)
Contrast helps everyone, but for those with severe color blindness or low vision it's the difference between being able to read and not. Use tools like WebAIM Contrast Checker or Stark in Figma to measure before approving the palette.
3. Avoid the problem color pairs
Some color pairings become indistinguishable for the most common forms of color blindness:
- Green and red (the classic)
- Green and brown
- Blue and purple
- Light green and yellow
- Blue and gray
- Green and gray
- Green and black
If your brand palette forces one of these pairings, compensate with strong differences in lightness and saturation. A very light green and a very dark red remain distinguishable in grayscale and therefore still work for someone who doesn't perceive hue.
4. Always design in grayscale first
A method we teach in our courses: when building a new interface, draw it in grayscale first and verify that all meaning still comes across. Only then add color — and it should reinforce the existing hierarchy, not create it.
Beyond producing accessible designs, this habit forces you to think in terms of visual hierarchy and information weight rather than decoration.
5. Test with simulators — every time
Don't trust your intuition. Use simulation tools that replicate a color blind person's vision on your design. We cover the tools in the next section.
Tools for testing and designing
The recommended toolbox — all free or with a generous free tier:
- Stark (Figma, Sketch, VS Code plugin): simulates 8 types of color blindness directly on your design, measures contrast, surfaces WCAG violations in real time. The de facto standard in 2026.
- Sim Daltonism (macOS, free open source): opens a window that shows in real time how anything on your screen appears to a color blind user. Powerful for testing live interfaces, not just mockups.
- Coblis Color Blindness Simulator (web): upload an image and see it through various CVD filters. Useful for one-off checks.
- WebAIM Contrast Checker: calculates the contrast ratio between two colors and immediately tells you whether you meet WCAG AA and AAA.
- Colour Contrast Analyser (TPGi): desktop app, more accurate than Chrome DevTools' checker for complex content.
- Chrome DevTools: under the Rendering panel you can emulate vision deficiencies on any live site. Useful for reviewing the finished product, not just mockups.
The workflow we recommend to our students: Stark during design, Chrome DevTools during final review, and a real test with color blind users before launch if the product has a large enough audience to justify it.
Common mistakes we see in student projects
From our Visual Design and Interaction Design courses, the wrong patterns we encounter most often:
- "I added a red icon and a green one, same thing": is the red icon a ✕ and the green one a ✓? Good. Are they two filled circles in different colors? Not enough. The shape has to change, not just the color.
- Blue links on lighter blue text: a typical mistake when chasing a tonal brand. Links need another signal besides color — typically an underline — precisely for this reason.
- Charts with a distant color legend: if the legend is in the top-left and the data is on the right, the user has to memorize the color–label association. For a color blind person it's a challenge. Put labels directly on the series when possible.
- Colored tags without icons: Kanban-style interfaces where statuses are only colored chips are among the worst offenders. Always add an icon or a letter.
- Maps with continuous color scales: pick perceptually uniform, "colorblind-safe" scales like Viridis, Cividis, or the palettes from ColorBrewer.
Practical checklist to apply today
A quick pre-flight check before delivering any design:
- No critical information is conveyed by color alone
- Text/background contrast ≥ 4.5:1 (AA) for normal text
- UI element contrast ≥ 3:1
- Error / success states have icon + text, not just color
- The design remains understandable in grayscale
- Simulated with Stark in at least 3 types of color blindness
- Links distinguishable from text without color (underline, weight, icon)
- Charts use different shapes/patterns in addition to color
- No forbidden pair (green+red, blue+purple, etc.) used to distinguish elements
Frequently asked questions
Should I avoid red and green entirely?
No. You can use them freely, provided the meaning doesn't rely solely on their difference. Red + error icon + "Invalid email" text is perfect. A red border alone is not.
Do color blind users already use tools to compensate?
Some do. System filters exist (iOS and Android have native color blindness options under Settings → Accessibility) and dedicated apps like Color Blind Pal. But don't design assuming they use them: many people with mild color blindness haven't even been diagnosed and don't know they have a condition. Design as if they had no assistance at all.
Is dark mode a problem for color blind users?
Not inherently. But dark mode often reduces chromatic contrast, and a palette that works well in light mode can become problematic in dark. When supporting both modes, verify both with Stark.
What's the most severe form of color blindness?
Complete achromatopsia: the person sees the world in grayscale. It's extremely rare (about 1 in 30,000). If you design for this condition — meaning in grayscale — you're automatically designing for every other form of color blindness as well.
Is there a universally colorblind-safe palette?
Not exactly universal, but there are palettes designed specifically for this. The most widely used in data visualization are Viridis, Cividis, Magma and the scales from ColorBrewer. For general UI work there's no universal palette: what matters is the method (redundancy, contrast, testing), not a specific set of colors.
Next steps
Color blindness is a gateway into the broader world of digital accessibility. If you want to keep going:
- Read our guide to usability heuristics — many have direct accessibility implications
- Go deeper into visual design and typography to understand how legibility and visual hierarchy tie together
- Study visual design in our dedicated course
Designing for accessibility isn't a checklist you tick off at the end: it's a way of thinking about design from the start. Once you internalize it, you don't go back.
