Color Blindness Simulator

See how images and colors appear through 8 types of color vision deficiency. Upload an image or enter colors to test accessibility.

Drop an image here or click to upload

JPG, PNG, or WebP — max 10MB

Pro Tips

  • Never rely on color alone: WCAG 1.4.1 requires that color is not the sole means of conveying information. Use icons, text labels, patterns, or underlines alongside color coding.
  • Test with deuteranomaly first: It is the most common form of color blindness, affecting roughly 5% of males. If your design works for deuteranomaly, it likely works for most users.
  • Blue is the safest hue: Blue is perceived relatively consistently across most types of color blindness. When in doubt, blue paired with orange provides good discrimination.
  • Check charts and graphs: Data visualizations are one of the most common places where color blindness causes confusion. Always provide alternative encoding like patterns or direct labels.
  • Design in grayscale first: If your design works in grayscale, it will work for users with achromatopsia and will generally have better contrast for everyone.

100% Private

All processing happens in your browser. Your images and colors are never uploaded to any server.

What Is the Color Blindness Simulator?

Color vision deficiency (commonly called color blindness) affects approximately 8% of men and 0.5% of women worldwide — over 300 million people. This free simulator lets designers, developers, and content creators see exactly how their work appears through the eyes of people with different types of color vision deficiency. Whether you are designing a website, creating a presentation, building a data visualization, or choosing a brand palette, testing with a color blindness simulator is an essential step in making your work accessible to everyone.

The tool supports all 8 major types of color vision deficiency, from the very common Deuteranomaly (green-weak, affecting ~5% of males) to the extremely rare Achromatopsia (total color blindness). Each simulation uses clinically-derived transformation matrices based on research by Brettel, Vienot, and Machado, the same models used in professional accessibility tools and academic studies.

How to Simulate Color Blindness

The simulator offers two modes. In Image Mode, upload any JPG, PNG, or WebP image (up to 10MB) and see a side-by-side comparison of original vision versus simulated color-deficient vision. Select from 8 types of color blindness using the dropdown, and the simulation updates in real time. For large images, the tool processes in chunks to keep the interface responsive, showing a progress bar while it works.

In Color Palette Mode, enter 2 to 6 colors using hex codes or the visual color picker. The tool generates a comprehensive grid showing how each color appears under all 8 types of color vision deficiency simultaneously. It automatically flags any color pairs that become nearly indistinguishable, helping you identify and fix accessibility problems before they reach production.

Key Features

The simulator processes images entirely in your browser using the Canvas API — your images are never uploaded to any server. Processing is chunked using requestAnimationFrame to avoid freezing the UI, with a visible progress indicator for larger images. The transformation matrices handle all 8 clinical types of color vision deficiency, covering the full spectrum from mild anomalous trichromacy to complete color blindness. The palette mode's conflict detection uses Euclidean distance in RGB space to automatically warn you when colors become confusingly similar. A Quick Check panel summarizes the most important accessibility implications for the currently selected deficiency type, with direct links to the WCAG Contrast Checker for deeper testing.

Frequently Asked Questions

What types of color blindness does this simulator support?

This simulator covers all 8 major types of color vision deficiency: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), Protanomaly (red-weak), Deuteranomaly (green-weak, the most common form), Tritanomaly (blue-weak), Achromatopsia (total color blindness), and Achromatomaly (partial color blindness). Each uses clinically-derived transformation matrices to accurately simulate how colors appear.

How common is color blindness?

Approximately 8% of men and 0.5% of women worldwide have some form of color vision deficiency — that is over 300 million people globally. The most common type is Deuteranomaly (green-weak), affecting about 5% of males. Red-green color blindness overall (including Deuteranopia, Deuteranomaly, Protanopia, and Protanomaly) affects roughly 6% of males.

How accurate are color blindness simulations?

The simulations use transformation matrices derived from color vision research (Brettel, Vienot, and Machado models). While no simulation can perfectly replicate an individual's experience — color blindness varies in severity from person to person — these matrices are the standard used by accessibility tools, design software, and academic research.

How do I make my designs color-blind friendly?

Follow three key principles: 1) Never use color as the only way to convey information — add icons, labels, patterns, or text. 2) Ensure sufficient contrast between any colors that need to be distinguished. 3) Test your designs with this simulator, focusing on Deuteranomaly first (the most common type). Blue/orange combinations tend to work well across most types of color blindness.

Is my image uploaded to a server?

No. All processing happens entirely in your browser using the Canvas API. Your images and colors never leave your device. The tool works completely offline once loaded.

Related Tools

WCAG Contrast Checker

Test color contrast ratios for AA and AAA compliance

Color Picker

Pick and convert colors in HEX, RGB, HSL, CMYK

Color Code Converter

Convert between HEX, RGB, HSL, and more formats

Color Palette Generator

Generate harmonious, accessible color palettes

Last updated: March 2026