Skip to content

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).

  1. Image Loading: Your uploaded image is drawn to HTML5 Canvas elements.
  2. 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.
  3. Real-time Preview: Original and simulated canvases update live as you change type or severity.
  4. 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

Dashboard UI with red buttons and green status indicators
 
Simulated view showing reduced distinguishability for deuteranopia users

Single Color Accessibility Check

Verify if a brand color remains visible under protanopia

#FF5500
 
Simulated hex value and visual preview

Full Image Simulation

Process a complete infographic for multiple blindness types

Marketing infographic image
 
Side-by-side original vs simulated views for 8 types

Frequently asked questions

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?

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?

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?

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?

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?

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?

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.

Color

CMYK to RGB

Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color

Color Mixer

Blend two colors together at custom percentages with multiple blend modes, full color space support, and accessibility analysis
Color

Color Palette Generator

Generate accessible color palettes from harmony rules or random golden-ratio colors. Lock favorites, simulate color blindness, and export to CSS, Tailwind, or JSON.