Color Blindness Simulator
Preview how colors and images appear to people with color vision deficiency (CVD). 8 simulation types: protanopia, deuteranopia, tritanopia, achromatopsia + anomaly variants. Per Machado et al. 2009.
Color Blindness Simulator
🎨 Color simulator — see how a single color appears
🖼️ Image simulator — preview a full image
How to use the Color Blindness Simulator
Test individual colors with the swatch grid
Type a hex code or use the color picker. The 8 swatches below show how that specific color appears under each CVD type. Particularly important pairs to check: red-green combinations (most common CVD type is red-green confusion), blue-yellow combinations (for tritan types). If your "error" red and "success" green look identical in the deuteranopia / protanopia swatches, your UI is unusable for ~5-8% of male users.
Upload a full design to preview accessibility
The image simulator processes any uploaded image through all 8 CVD types and renders the results side-by-side. Use it for: marketing campaign visuals, data visualisations (charts, heat maps, infographics), product UI screenshots, brand color palettes, status indicators (red error / green success). Compare the original to each CVD variant — if information becomes harder or impossible to distinguish, the design fails for those users.
Focus on deuteranomaly — the most common CVD
About 5% of men have deuteranomaly (weak green cones) — the most common CVD type. Protanomaly (weak red) affects another ~1% of men. Combined, ~6-8% of men have some form of red-green CVD. Women are far less affected (CVD is X-linked recessive; women need two affected X chromosomes). About 0.5% of women have some CVD. Tritan types (blue-yellow) are very rare — less than 0.1% of either sex. Achromatopsia (complete color blindness) is extremely rare — ~0.003%.
Apply accessibility fixes
If your design fails CVD simulation: (1) Add non-color indicators — icons + text labels, not just color (error: red X + "Error" word). (2) Use patterns / textures in charts — solid red + striped red instead of red + green. (3) Pick colorblind-safe palettes — ColorBrewer's "qualitative" sets are CVD-tested, or use viridis / cividis for sequential data. (4) Increase contrast — high contrast helps everyone but especially CVD users. (5) Test with real users — automated simulation catches a lot but not everything.
Color blindness — the design accessibility issue you can fix with one tool
Color vision deficiency (CVD), commonly called "color blindness", affects about 1 in 12 men and 1 in 200 women globally — roughly 300 million people. The most common type, deuteranomaly (weak green cones), affects about 5% of men. Despite the prevalence, CVD remains one of the most under-considered accessibility issues in digital design. Designers often use red for "bad" and green for "good" without realising that those two colors look almost identical to deuteranopes — making error messages, success states, and chart legends unintelligible. The fix is straightforward (add non-color indicators, use CVD-safe palettes) but requires awareness. This simulator lets you SEE how your work appears to CVD users without needing colorblind testers on staff.
The biology of color vision and how CVD breaks it
Human color vision relies on three types of cone cells in the retina: L-cones (long wavelength, peak ~564 nm, sensitive to RED), M-cones (medium wavelength, peak ~533 nm, sensitive to GREEN), and S-cones (short wavelength, peak ~437 nm, sensitive to BLUE). Normal trichromacy uses all three. CVD types occur when one or more cone types is absent (-anopia) or has shifted sensitivity (-anomaly): Protanopia / protanomaly: L-cones missing or weak — red appears dim, red-green confusion. Deuteranopia / deuteranomaly: M-cones missing or weak — green appears dim, red-green confusion (most common). Tritanopia / tritanomaly: S-cones missing or weak — blue-yellow confusion, very rare. Achromatopsia: complete loss of color vision (rod-only vision, monochromatic) — also extreme light sensitivity in many cases. The simulation matrices in this tool approximate the perceptual experience using Machado et al. 2009's physiologically-grounded model.
1 in 12 men can't reliably tell red from green. Using only color to convey error vs success makes your interface unintelligible to a measurable fraction of every audience.
Why "use color + something else" is the universal fix
The WCAG 2.1 SC 1.4.1 (Use of Color) success criterion requires that color never be the SOLE means of conveying information. Workarounds: (1) Icons: error states get red color PLUS an X icon; success gets green PLUS a checkmark. (2) Text labels: chart series gets color PLUS a text legend label. (3) Patterns + textures: chart bars use solid + striped + dotted in addition to color. (4) Position + layout: forms group required fields together visually rather than just coloring labels red. (5) High contrast: even when color is informative, high luminance contrast between adjacent colors helps everyone (including CVD users). The simulator tells you if your color choices alone work; the accessibility audit also covers whether non-color indicators are present.
The ASEAN accessibility-regulation + design angle
Accessibility regulation across ASEAN is maturing rapidly, and CVD considerations are baked into emerging standards. Singapore: Digital Service Standards reference WCAG 2.1 AA — includes SC 1.4.1 (color is not sole indicator). Government and increasingly private digital services must comply. Malaysia / Indonesia / Philippines: emerging WCAG-aligned guidelines, less strictly enforced. The EU's European Accessibility Act (effective June 2025) is a forcing function for ASEAN companies serving European customers — Grab, Sea, Shopee, GoTo, Tokopedia, Lazada all need WCAG 2.1 AA compliance for their EU-facing services. Common ASEAN design issues: red-green error/success states in mobile-first interfaces (Carousell, Grab Food, ShopeeFood all use red-green status colors); data visualisations in e-commerce dashboards (Lazada Seller Center, Shopee Marketing platform); financial fintech apps that signal gains in green / losses in red (DBS, OCBC, GXS Bank, Akulaku). Simple fix is the same everywhere: add icons or text labels alongside color signals. The simulator tells you when this is needed; the discipline is building it into design system primitives from the start so every new feature inherits CVD-safe color usage.
10 Things to Know About Color Vision Deficiency
About 1 in 12 men and 1 in 200 women globally have some form of color vision deficiency — roughly 300 million people worldwide.
The most common CVD is deuteranomaly (weak green cones), affecting ~5% of men. Protanomaly (weak red) affects another ~1%.
CVD is mostly X-linked recessive — men (one X chromosome) only need one affected gene; women need two, making it much rarer in females.
The classic "color blindness" is red-green confusion — protanopia + deuteranopia + their anomalous variants. Blue-yellow CVD (tritan) is much rarer.
True "color blindness" (achromatopsia — complete monochromatic vision) is extremely rare, ~0.003% of people. The popular term is misleading.
The Machado et al. (2009) matrices in this simulator are the gold-standard physiologically-based CVD model used in IEEE TVCG research.
WCAG 2.1 SC 1.4.1 (Use of Color) requires that color is never the SOLE means of conveying information. Universal accessibility law in EU + most jurisdictions.
Some color palettes are CVD-safe by design: ColorBrewer's "qualitative" sets, the viridis + cividis sequential palettes, Wong's 8-color palette (Nature Methods).
EnChroma glasses filter specific wavelengths to enhance color discrimination for protanomalous + deuteranomalous users. Don't work for full anopia or achromatopsia.
The Ishihara plates (the "number hidden in colored dots") test CVD type — invented by Shinobu Ishihara in 1917, still the most common clinical CVD test globally.
Frequently Asked Questions
-
Within the limits of any visual simulation. The matrices come from Machado et al. (2009), "A Physiologically-based Model for Simulation of Color Vision Deficiency" — the gold standard in CVD simulation research, used by Adobe Photoshop, Affinity Designer, and Coblis. The simulation captures the perceptual effect for someone with full anopia (missing cone type) accurately; anomaly types (weak cone) are approximated at severity 1.0. Actual CVD users vary in severity — some see partial color, some see almost none. Treat the simulator output as "approximate worst-case experience" for that CVD type.
-
Deuteranomaly first — it's the most common (5% of men). Then deuteranopia and protanopia (1% of men each). Red-green confusion is by far the most common CVD experience, affecting ~6-8% of male users combined. If your design works for deuteranopia + protanopia, it works for the vast majority of CVD users. Tritanopia + achromatopsia are rare (less than 0.1% combined) — testing them is bonus but not the highest-impact use of design time. The 4-row swatch grid in this tool puts these in the most common order: anomalies on top (more frequent, milder), full anopias in the middle, tritan + achromatopsia at the bottom.
-
Most red-green CVD is X-linked recessive — the genes for L (red) and M (green) cones are on the X chromosome. Men have one X chromosome (XY), so a single affected gene causes CVD. Women have two X chromosomes (XX), so they need BOTH copies of the gene affected — a much rarer occurrence. The math: if 8% of men have CVD (X-linked single affected), then about 0.64% of women would (8% × 8% = 0.64%) — close to the observed 0.5%. Tritan + achromatopsia are autosomal (not X-linked) so they affect men and women roughly equally — but both are very rare overall.
-
Not cured, but enhanced for some types. EnChroma glasses use specific notch filters to reduce wavelength overlap between L and M cone responses, making red-green discrimination easier for anomalous trichromats (5-6% of men). They don't work for full anopia (missing cones can't be filtered into existence) or achromatopsia. Gene therapy for X-linked CVD is in early experimental stages (clinical trials at University of Washington + others) — primate studies show successful color vision restoration via viral vector gene delivery, but human trials are years away from approval. No surgical cure exists currently.
-
A set of colors specifically chosen to be distinguishable to CVD users. Famous examples: ColorBrewer's qualitative palettes (cynthia.brewer.com) — used by Excel + R + Python ggplot2. Wong's 8-color palette (Nature Methods, 2011) — a small set of distinctive colors that work for all common CVD types. Viridis + cividis — sequential color maps designed by Stéfan van der Walt for matplotlib, perceptually uniform AND CVD-safe. IBM Carbon's data visualization palette — vetted for CVD. Choose these as defaults for charts; never use the classic "rainbow" or "jet" color maps (they're CVD-hostile).
-
Optional but recommended for high-quality work. Tritanopia + achromatopsia together affect less than 0.1% of the population — much rarer than red-green CVD. For most products, deuteranopia + protanopia coverage is the high-impact 80% of CVD users. For accessibility-critical applications (government services, healthcare, banking), test all 8 types — the marginal effort is small once you have the simulator set up. The grayscale-equivalent achromatopsia preview is also useful for testing "does this design work in black & white?" — useful for printing, low-DPI screens, very high contrast environments.
-
Same underlying math (Machado et al. 2009 matrices), different workflow. Photoshop / Illustrator's "Proof Colors: Color Blindness — Protanopia/Deuteranopia" applies CVD simulation to your active document in the design tool itself — preview-while-you-work. This calculator is a quick standalone alternative: paste a color or upload an image, see all 8 simulations at once side-by-side. Useful when you don't have Photoshop, want to compare types simultaneously, or need to test colors from a non-image source (CSS hex code, brand guidelines). For active design work, Photoshop's integrated proof is more efficient; for quick checks or non-designer users, this tool is faster.
-
No. All processing runs entirely in your browser via JavaScript + Canvas API. There's no server roundtrip — open DevTools → Network and confirm zero outbound requests when you upload an image or change colors. Your designs stay on your device. Safe for unannounced product mockups, brand color development, or any proprietary visual work that shouldn't leave your machine.
-
Images are auto-scaled to a maximum 600px on the longest dimension for performance — the 8 simultaneous simulations would otherwise overwhelm slower devices. For most accessibility-testing use cases, 600px is plenty: it preserves color information AND lets you compare all 8 variants side-by-side without scrolling. For very high-fidelity work (testing exact pixel-level CVD effects in icons or fine details), use Photoshop's integrated proof tool instead, which can operate at full resolution.
-
Many. (1) Low vision (cataracts, macular degeneration, diabetic retinopathy) — affects ~10% of adults over 50; mitigation = high contrast, clear typography (rem units, larger sizes), zoom support. (2) Light sensitivity (photophobia, common with migraines + autism + concussion recovery) — provide dark mode, avoid stark white backgrounds. (3) Motion sensitivity (vestibular disorders) — respect prefers-reduced-motion CSS query, avoid parallax + auto-scroll. (4) Blindness — screen reader compatibility, alt text, ARIA labels. (5) Cognitive load — clear language, predictable layouts, minimal cognitive overhead. CVD simulation is one tool among many; WCAG 2.1 covers most of these comprehensively.
Related News
You may be interested in these recent stories from our newsroom.
-
NEXTDC Opens Peninsular Malaysia's First Tier IV Data Centre with RM2.8 Billion KL1 Launch in Petaling Jaya
NEXTDC officially opened KL1 in Petaling Jaya on 14 May 2026 — an AUD$1 billion facility that holds Peninsular Malaysia's first Uptime Insti...
-
Indonesia's INA Locks In 30% Annual Allocation for AI and Data Centre Infrastructure
Indonesia's sovereign wealth fund INA has formalised a 30% annual cap on digital sector deployment, anchored by a joint venture with Singapo...
-
Microsoft Build 2026: Project Polaris Cuts Copilot's OpenAI Dependency, Copilot Workspace Ships to GA
Microsoft confirmed at Build 2026 in San Francisco that GitHub Copilot will run on Project Polaris — its own mixture-of-experts coding model...
75 more free tools
Calculators, converters, security tools — no signup.