Color Blindness Simulator
Color ToolsSimulate how colors and images appear to users with protanopia, deuteranopia, tritanopia, achromatopsia, and other color vision deficiencies.. Free, private — all processing in your browser.
The quick brown fox jumps over the lazy dog
Normal text (16px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text (14px) — Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Color Blindness Simulator shows you how colors and images appear to users with different types of color vision deficiency (CVD). Roughly 8% of men and 0.5% of women have some form of color blindness — that\u2019s one in every twelve people visiting your site. If your interface uses color to convey meaning (red for error, green for success), those users may not distinguish the states. This tool simulates the most common CVD types so you can preview your design through their eyes before it ships.
Simulated types include protanopia (red-blind, no red cones), deuteranopia (green-blind, no green cones, the most common CVD), tritanopia (blue-blind, rare), protanomaly and deuteranomaly (reduced red or green sensitivity), tritanomaly, achromatopsia (complete color blindness, only grayscale), and blue-cone monochromacy. For each simulation, input a color, a palette, or upload an image, and the tool renders a side-by-side comparison of normal vision and simulated vision. Accessibility insights: colors that look obviously different to typical vision but identical in simulation indicate a problem — the design relies on color alone to convey meaning and fails for CVD users. The fix is to add a non-color indicator (icon, label, pattern, underline) alongside the color.
Color Blindness Simulator — key features
All common CVD types
Protanopia, deuteranopia, tritanopia, anomalous forms, achromatopsia, and blue-cone monochromacy.
Side-by-side comparison
See normal vision and simulated vision next to each other for any color, palette, or image.
Image upload
Drop screenshots, mockups, or photos to simulate full-image CVD rendering.
Palette analysis
Paste multiple colors to see how the palette holds up under different CVD types.
Severity control
Anomalous trichromacy simulations scale from mild to full dichromacy to match the range of real users.
Statistical context
Shows what percentage of the population has each CVD type so you can prioritize which to check.
Viénot-Brettel-Mollon model
Uses the peer-reviewed standard simulation algorithm, not ad-hoc color filters.
Client-side processing
Images and palettes stay in your browser; nothing uploaded to a server.
How to use the Color Blindness Simulator
- 1
Choose input type
Pick single color, palette, or image upload.
- 2
Enter color or upload image
Paste hex/RGB/HSL colors, or drop a screenshot from a design tool.
- 3
Select CVD types to simulate
Check the types you want to preview — deuteranopia (most common) is usually essential.
- 4
Review side-by-side
Each simulation appears next to the normal view for direct comparison.
- 5
Identify issues
Colors that look very different in normal view but identical in simulation indicate accessibility problems — redesign with non-color redundancy.
Common use cases for the Color Blindness Simulator
Accessibility review
- →Palette audit: Check that every palette in your design system remains distinguishable across common CVD types.
- →Icon state colors: Verify that status indicator colors (success green, error red) are distinguishable to users with deuteranopia.
- →Chart accessibility: Review data visualizations to confirm colors chosen for different data series are distinguishable in CVD simulations.
Design process
- →Pre-launch audit: Include CVD simulation in design review before launch to catch issues early.
- →Logo and brand review: Confirm brand elements read as intended across the CVD spectrum.
- →Marketing material: Check that ads and landing pages remain effective for the 8% of men and 0.5% of women with CVD.
Testing and QA
- →Automated accessibility testing: Include CVD simulation in accessibility audit alongside contrast and ARIA checks.
- →Bug verification: When a user reports "I can’t tell the colors apart", reproduce with the relevant CVD simulation.
- →Competitive analysis: See how competitors’ products handle CVD to benchmark your accessibility.
Color Blindness Simulator — examples
Red-green pair
Common error/success colors that fail for deuteranopia.
#E74C3C (red error) and #2ECC71 (green success)
normal: clearly different red and green deuteranopia: both appear as similar brownish-yellow — users cannot tell error from success
Blue-orange pair
A pairing that works well for all CVD types.
#3498DB (blue) and #E67E22 (orange)
normal: clearly distinct blue and orange deuteranopia: still distinct (blue remains blue, orange becomes yellow-green) protanopia: still distinct tritanopia: both appear different, still distinguishable
Ishihara plate
Classic CVD test plate.
image: red-green ishihara plate showing number 74
normal: clearly shows 74 deuteranopia: number invisible or reads as different digits protanopia: same — number not visible
Traffic light
Standard traffic signal colors.
red, yellow, green signals
deuteranopia: red and green hard to distinguish; position matters more than color protanopia: similar issue achromatopsia: all appear as three distinct grays — position and brightness encode state
Brand color check
Testing whether a brand color palette works for CVD users.
brand palette: #FF6B35, #6BC5FF, #C5FF6B
normal: orange, light blue, yellow-green deuteranopia: orange becomes dull yellow, light blue stays blue, yellow-green becomes muddy action: consider adjusting the yellow-green or adding non-color differentiators
Technical details
Color blindness simulation uses matrix transformations applied to RGB values. Each CVD type has a specific transformation matrix derived from research on cone cell responses.
The Viénot-Brettel-Mollon model (1999) is the most widely used and is what this tool implements. It converts sRGB → LMS cone response space, applies a dichromacy-specific projection that removes the deficient cone, then converts back to sRGB.
LMS conversion matrix (sRGB → LMS):
L = 0.3904725×R + 0.5499530×G + 0.0044735×B
M = 0.0708695×R + 0.9629757×G + 0.0013351×B
S = 0.0231355×R + 0.1280464×G + 0.9365471×B
For each dichromacy, the projection substitutes the missing cone\u2019s contribution with a linear combination of the remaining cones (based on research-derived weights). For example, protanopia (no L cone):
L_sim = 2.02344×M - 2.52581×S
(M and S remain the user\u2019s actual cone response)
Convert simulated LMS back to sRGB using the inverse matrix.
Gamma correction: sRGB is gamma-corrected before the LMS transform and reapplied after, since the transformation is linear but display is non-linear.
Anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) is modeled by interpolating between normal vision and dichromacy by a severity parameter (0 = normal, 1 = full dichromacy). Clinically, anomalous trichromats vary in severity; 50% is a reasonable default for illustration.
Achromatopsia: replace all color with luminance. Weighted grayscale: Y = 0.2126×R + 0.7152×G + 0.0722×B (BT.709 luminance).
Blue-cone monochromacy: similar to achromatopsia but preserves blue axis.
Image simulation applies the transformation pixel-by-pixel. For large images, the tool processes in the browser using Canvas 2D imageData, which is fast (megapixel images in under a second).
Color palette simulation applies the transformation to each color in the palette side by side for quick comparison.
Common problems and solutions
⚠Simulating deuteranopia only
Deuteranopia is most common but protanopia, tritanopia, and anomalous forms exist too. Always check at least deuteranopia, protanopia, and achromatopsia for thorough coverage.
⚠Relying on simulation alone
Simulation models are approximations. For production accessibility, combine simulation with user testing (ideally with CVD users) and contrast/non-color-indicator checks.
⚠Red-green palette traps
Red and green are the most common CVD-problematic pairing because deuteranopia and protanopia affect the red-green axis. Avoid relying on red-vs-green distinctions for meaning.
⚠Status colors failing
Success-green and error-red used together often fail for deuteranopia users. Add icons, patterns, or text labels so color is never the sole indicator.
⚠Chart colors indistinguishable
Data visualization with many red-green variants confuses CVD users. Use blue-orange or blue-red palettes that work across all common CVD types.
⚠Achromatopsia not checked
Full color blindness (achromatopsia) is rare but severe. If any design element relies on hue, it fails for achromatopsia users. Always provide grayscale-viable redundancy.
⚠Sorry, not medically diagnostic
This tool simulates CVD for design checking; it is not a medical diagnostic. Actual color vision testing requires clinical equipment and protocols.
Color Blindness Simulator — comparisons and alternatives
Compared to Coblis and similar single-purpose sites, this tool covers more CVD types with side-by-side comparison. Coblis is dedicated and well-regarded; this tool matches it with additional features.
Compared to browser DevTools CVD simulation (Chrome supports it), this tool works on isolated colors and palettes without requiring a rendered page. DevTools wins for testing live sites; this tool wins for design exploration.
Compared to accessibility plugins in Figma (Stark, A11y), this browser-based tool is free and works without a design-tool subscription. Plugins are more convenient in the design workflow; this tool is the universal fallback.
Frequently asked questions about the Color Blindness Simulator
▶What types of color blindness does the tool simulate?
Protanopia (no red cones), deuteranopia (no green cones — most common), tritanopia (no blue cones — rare), protanomaly, deuteranomaly, tritanomaly (reduced sensitivity forms), achromatopsia (no color vision), and blue-cone monochromacy. Combined these cover the vast majority of color vision deficiencies.
▶How common is color blindness?
About 8% of men and 0.5% of women have some form of color vision deficiency. Deuteranomaly (reduced green sensitivity) is the most common at 5% of men. Any sizeable audience will include CVD users, which is why designing for them matters.
▶How accurate is the simulation?
The Viénot-Brettel-Mollon model used here is the peer-reviewed standard in the field, widely implemented in research tools and operating system accessibility features. Real CVD users have individual variation in severity and neural adaptation; the simulation gives a reasonable approximation, not a perfect one.
▶What is the most common color blindness?
Deuteranomaly (reduced green sensitivity) is the most common at about 5% of males. Deuteranopia (full green-cone loss) is 1-2%. Protanopia/protanomaly together affect about 2%. Tritan types are rare (under 0.01%). Always prioritize deuteranomaly and deuteranopia simulations.
▶How do I make my design CVD-friendly?
Never use color as the only cue for meaning. Combine color with icons, text labels, patterns, or shape. Use blue-orange palettes instead of red-green when possible. Check your palette in simulation before launch and follow WCAG 2.1 SC 1.4.1 ("Use of Color").
▶Can I simulate an image?
Yes. Drop a screenshot or mockup into the image upload area and the tool renders it in the selected CVD modes. Useful for testing full screens, charts, and complex graphics rather than just individual colors.
▶Does the simulation check accessibility?
It shows how CVD users perceive colors, which you can compare. It does not automatically flag issues — you still need to assess whether the simulated view conveys the same meaning as the normal view. Combine with contrast checking for full accessibility audit.
▶Is my image uploaded anywhere?
No. Image processing runs entirely in the browser using Canvas 2D. Uploaded images, screenshots, and palettes never leave your machine, which matters for unannounced product designs.
Additional resources
- Viénot-Brettel-Mollon simulation paper — Original research paper describing the CVD simulation algorithm used by most tools.
- WCAG 2.1 Use of Color — Accessibility requirement that color must not be the only visual means of conveying information.
- Colour Blind Awareness — UK charity with resources on color blindness prevalence and design advice.
- Microsoft CVD design guidance — Practical guidance on designing for color vision deficiencies from Microsoft.
- Chrome DevTools CVD simulation — Built-in browser tool for simulating CVD on rendered web pages.
Related tools
All Color ToolsColor Contrast Checker
Check color contrast ratios between foreground and background for WCAG 2.1 AA and AAA compliance with live preview.
Color Converter
Convert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats
Color Name Finder
Find the nearest named color for any hex, RGB, or HSL value from CSS web colors, X11 standard colors, and Pantone approximations.
Color Palette Generator
Generate harmonious color palettes from any base color with complementary, analogous, triadic, and monochromatic schemes.
Color Picker
Pick colors interactively and get HEX, RGB, HSL, HSV, and CMYK values with alpha, plus save swatches to build palettes you can copy straight into CSS, Figma, or code.
Color Shades Generator
Generate tints (lighter), shades (darker), and tones (desaturated) from any base color for design systems and UI states.
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →