Color Blindness Vision Simulator
Simulate your UI components, color palettes, and mockups under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia to verify non-color accessibility.
Deuteranopia (Green-Blind)
Absence of green cones. Difficulty distinguishing green, red, brown, and orange hues.
1. Normal Vision (Original)
Standard RGBInteractive State Badges:
Call to Action Buttons:
2. Simulated (Deuteranopia)
Filtered MatrixInteractive State Badges:
Call to Action Buttons:
Palette Color Swatch Simulation
Simulate Custom Image or Mockup
Upload a PNG/JPG screenshot to view under the selected filter.
Technical Deep-Dive: Designing for Color Vision Deficiency
📌 On this page
1. How human color vision works, briefly
Typical human color vision relies on three types of cone photoreceptors in the retina, each most sensitive to a different wavelength range — commonly labeled long (red-ish), medium (green-ish), and short (blue-ish) wavelength cones. The brain constructs perceived color by comparing the relative signal strength across these three cone types. Color vision deficiencies arise when one cone type is absent (dichromacy, the most severe form) or has a shifted sensitivity curve (anomalous trichromacy, a milder and more common form) — in both cases, colors that would normally produce distinguishable signals become harder or impossible to tell apart.
2. The four deficiency types this tool simulates
Deuteranopia (absent medium/green-sensitive cones) is the most common form, causing difficulty distinguishing red, green, brown, and orange — colors that differ mainly in the medium-wavelength signal. Protanopia (absent long/red-sensitive cones) produces a related but distinct confusion pattern, where reds appear notably darker in addition to red-green confusion. Tritanopia (absent short/blue-sensitive cones) is rare and causes blue-yellow confusion rather than red-green. Achromatopsia (complete absence of functional cone vision, relying entirely on rod cells) is extremely rare and results in full grayscale perception with no color discrimination at all.
3. How the SVG color matrix filter works
An SVG feColorMatrix filter transforms each pixel's RGBA values by multiplying them against a 4x5 matrix, producing new output values as a weighted combination of the original red, green, blue, and alpha channels. The matrices used in this simulator are published approximations that model how each deficiency type maps the full color spectrum onto the reduced set of distinguishable colors that condition allows — for example, achromatopsia's matrix collapses all three color channels into the same luminance-weighted grayscale value for every output channel, which is why it renders everything as shades of gray.
4. WCAG 1.4.1 and the "don't rely on color alone" principle
WCAG Success Criterion 1.4.1 (Use of Color) requires that color never be the sole means of conveying information, indicating a state, or prompting an action. This is a deliberately broader, more robust requirement than "pick colorblind-safe colors" — a red/green error/success indicator that also includes a checkmark icon and an "✓ Success" or "✗ Error" text label remains fully usable to a color-blind user even if the specific red and green shades happen to be difficult to distinguish for their particular deficiency type, because the icon and text carry the meaning independently of color.
5. Common UI patterns that fail color-blind users
Frequent offenders include form validation that only turns a field's border red on error with no accompanying error message or icon, chart legends distinguished purely by line/bar color with no pattern or direct labeling, "required field" indicators using only a colored asterisk, status dashboards using red/yellow/green dots with no text label, and links styled only by a color difference from surrounding text with no underline. Each of these examples works fine for the majority of users but creates a genuine usability barrier — not just an inconvenience — for the meaningful fraction of the population with a color vision deficiency.
6. A practical design checklist
Before shipping a design: pair every color-coded status with an icon or text label, ensure links are distinguishable from body text by more than color alone (underline, weight, or a hover state that reveals intent), verify chart/graph data series use patterns or direct labels in addition to color, run key screens through this simulator across all four deficiency types, and check color contrast ratios separately (color-blind-safe and sufficient-contrast are related but distinct requirements — a color pair can be perfectly distinguishable to a color-blind user while still failing a contrast ratio check, and vice versa).
Frequently Asked Questions
Why should website designers simulate color blindness?
Approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) have some form of color vision deficiency. If your UI conveys meaning solely through color (e.g. green for success and red for error without supporting icons or text labels), color-blind users cannot use your interface reliably.
What is WCAG Success Criterion 1.4.1 (Use of Color)?
WCAG 1.4.1 requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Always pair colors with icons, underline text links, and provide text labels.
Which type of color blindness is most common?
Deuteranomaly and Deuteranopia (red-green color blindness where green photoreceptors are impaired or absent) account for over 70% of all color vision deficiencies.
How does this client-side simulator work?
This tool applies standardized LMS/RGB color transformation matrices using SVG filters and HTML5 Canvas processing entirely within your browser. No images are uploaded to any external server.
How accurate is a matrix-based simulation compared to actually experiencing color blindness?
These transformation matrices are a well-established approximation (based on published color-science research modeling how dichromatic vision maps colors) widely used in design and accessibility tooling, and they are genuinely useful for catching problems like "these two status colors become indistinguishable." They are not a perfect substitute for lived experience, however — color blindness severity varies between individuals even within the same diagnosed type (anomalous trichromacy exists on a spectrum, not just the "dichromatic" absence simulated here), and a static color transform cannot capture how context, lighting, and individual adaptation affect real-world perception. Treat this as a strong directional design-checking tool, not a clinical-grade vision replication.
Should I redesign my entire color palette if it fails this simulation?
Not necessarily — the more effective and broadly applicable fix is usually to stop relying on color alone to convey meaning (per WCAG 1.4.1), by adding icons, text labels, patterns, or underlines alongside color-coded states. This approach protects users regardless of the specific type or severity of their color vision deficiency, whereas hand-picking a palette that works for one type of color blindness may still fail for another. Use this simulator to identify where color-only signaling exists in your design, then prioritize adding a non-color cue over endlessly re-picking colors.