ZeroTool Workbench

Color Blindness Simulator

Simulate 8 types of color vision deficiency on any hex color or uploaded image. Compare protanopia, deuteranopia, tritanopia, and more side by side. Free, browser-based, no upload required.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
Original
Protanopia Red-blind
Deuteranopia Green-blind
Tritanopia Blue-blind
Protanomaly Red-weak
Deuteranomaly Green-weak
Tritanomaly Blue-weak
Achromatopsia No color
Achromatomaly Low color

Related Tools

Color Contrast Checker Check WCAG color contrast ratio for any foreground and background. Get AA/AAA pass-fail for body text, large text, and UI components, plus a one-click "keep hue, fix lightness" suggestion when contrast is too low. Color Palette Generator Generate complementary, analogous, triadic, and tetradic color palettes from any base color. Enter HEX or pick a color to instantly see 4 harmonious palettes. Click to copy individual colors or copy all HEX values per palette. 100% browser-based. Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. JSON Formatter Prettify, minify, and validate JSON instantly in your browser. Base64 Encode / Decode Encode text to Base64 or decode Base64 back to plain text. Basic Auth Header Generator Generate and decode HTTP Basic Authentication headers in your browser. Copy Authorization headers, tokens, cURL snippets, and Fetch examples with no upload.

How to Use

  1. In Color mode, enter a hex color or use the color picker. The tool instantly shows how that color appears under each of the 8 color vision deficiency types in a comparison grid.
  2. In Image mode, drag and drop an image (or click to browse). The tool processes the image locally and displays 9 side-by-side previews — the original plus all 8 simulations.
  3. In Color mode, click any hex value to copy it to your clipboard.

Understanding Color Vision Deficiency

Color vision deficiency (CVD) affects how the eye’s cone cells respond to light. Human color vision relies on three types of cone cells: L-cones (red), M-cones (green), and S-cones (blue). When one type is missing or malfunctioning, certain colors become indistinguishable.

  • Protanopia / Protanomaly — affects L-cones (red perception). Reds appear darker and shift toward brown or green. About 2% of males.
  • Deuteranopia / Deuteranomaly — affects M-cones (green perception). The most common form, affecting roughly 6% of males. Greens and reds look similar.
  • Tritanopia / Tritanomaly — affects S-cones (blue perception). Rare, affecting under 0.01% of the population. Blues and greens become confused.
  • Achromatopsia / Achromatomaly — affects all cone types. Complete achromatopsia results in grayscale vision; achromatomaly significantly reduces color saturation.

Design Tips for Accessibility

Use this tool alongside the Color Contrast Checker for a complete accessibility audit. Rely on shape, pattern, or text labels rather than color alone to convey meaning. Test critical UI elements — error states, charts, status indicators — through at least protanopia and deuteranopia simulations, as these cover the majority of affected users.

Privacy

All simulation runs in your browser. No images or color data are sent to any server.

FAQ

What types of color blindness does this tool simulate?

Eight types: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), protanomaly (red-weak), deuteranomaly (green-weak), tritanomaly (blue-weak), achromatopsia (total color blindness), and achromatomaly (reduced color vision). These cover the full spectrum of color vision deficiencies.

How accurate is the simulation?

The tool uses the Viénot (1999) and Brettel (1997) color transformation matrices, the same algorithms used by browser DevTools and accessibility testing software. Anomalous trichromacy types use a 60% severity interpolation. Results are a close approximation — individual perception varies.

Does this tool upload my images?

No. All processing runs entirely in your browser using the Canvas API. Images never leave your device.

Why should I check my designs for color blindness?

Approximately 8% of males and 0.5% of females have some form of color vision deficiency. WCAG 2.1 Success Criterion 1.4.1 requires that color is not the sole means of conveying information. Testing your UI with a simulator helps ensure your design is accessible to everyone.

What is the difference between dichromacy and anomalous trichromacy?

Dichromacy (protanopia, deuteranopia, tritanopia) means one type of cone cell is absent — the person cannot perceive that color channel at all. Anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) means the cone cells are present but shifted in sensitivity — color perception is reduced but not eliminated.