Color Blindness Simulator
Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Updated
What is the Color Blindness Simulator?
The Color Blindness Simulator lets you instantly preview how any image, screenshot, or design appears to people with common color vision deficiencies.
Upload an image and switch between protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), anomalous trichromacy variants, and complete monochromacy. All processing happens instantly in your browser with no data leaving your device.
Perfect for designers, developers, and accessibility auditors ensuring inclusive digital experiences.
How it works
This tool uses scientifically grounded RGB transformation matrices derived from research on human cone cell responses (LMS color space modeling).
- Image Loading: Your uploaded image is drawn to HTML5 Canvas elements.
- Pixel Processing: Each pixel's RGB values are transformed using precomputed matrices for the selected deficiency type. Severity sliders interpolate between normal vision and full deficiency for anomaly types.
- Real-time Preview: Original and simulated canvases update live as you change type or severity.
- Single Color Mode: Hex colors are converted to RGB, simulated, and shown with a visual swatch for quick testing.
The algorithms approximate how missing or altered cone responses affect color perception, helping identify low-contrast or confusable elements in your designs.
Examples
Test a UI Screenshot
Upload a dashboard screenshot to check red-green contrast issues
Single Color Accessibility Check
Verify if a brand color remains visible under protanopia
Full Image Simulation
Process a complete infographic for multiple blindness types
Frequently asked questions
What types of color blindness does this simulator support?
What types of color blindness does this simulator support?
This tool simulates Normal Vision, Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, and Achromatopsia (monochromacy). Severity controls are available for partial deficiencies.
Is my uploaded image stored or sent to a server?
Is my uploaded image stored or sent to a server?
No. Everything runs 100% client-side in your browser using Canvas and JavaScript. Your images never leave your device and are not stored.
How accurate is the simulation?
How accurate is the simulation?
The matrices are based on established research (including models by Machado et al. and widely used in tools like Coblis). While individual perception varies, it provides a reliable approximation for design and accessibility testing.
Can I simulate color blindness on websites or live previews?
Can I simulate color blindness on websites or live previews?
Currently focused on static images and single colors. For full webpage simulation, use browser developer tools (e.g., Chrome DevTools or Firefox Accessibility Inspector) alongside this for image assets.
What file formats are supported for upload?
What file formats are supported for upload?
Common web formats: PNG, JPG/JPEG, and GIF. Large images are scaled for performance while preserving aspect ratio.
Why do some colors look similar after simulation?
Why do some colors look similar after simulation?
This is the core of color vision deficiency — certain hues (especially reds/greens) become harder to distinguish, which the simulator demonstrates to help improve contrast and accessibility.
Can I download the simulated image?
Can I download the simulated image?
Yes. Use the Download buttons for both the original and any simulated version as high-quality PNG files.
Related tools
More utilities you might find handy.
CMYK to RGB
Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color Escape Code Generator
Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.
Color Mixer
Blend two colors together at custom percentages with multiple blend modes, full color space support, and accessibility analysis