UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Color Blindness Simulator

Simulate how colors or images appear to people with various types of color blindness including deuteranopia and protanopia.

About Color Blindness Simulator

The Color Blindness Simulator applies color vision deficiency (CVD) simulation matrices to input colors, showing how they appear to people with various types of color blindness. Supported deficiency types include Deuteranopia (red-green, most common, ~5% of males), Protanopia (red-green, red perception reduced), Tritanopia (blue-yellow, rare), Achromatopsia (full color blindness, grayscale), and the partial variants Deuteranomaly and Protanomaly. Enter a palette of hex colors or upload a UI screenshot to see the simulated view. This tool is essential for inclusive design, helping designers verify that color alone is not used to convey information.

Why use Color Blindness Simulator

  • Simulates 6 types of color vision deficiency including full achromatopsia.
  • Shows original and simulated colors side by side for direct comparison.
  • Helps ensure designs meet WCAG guideline 1.4.1 (Use of Color).
  • Instantly switches between deficiency types for quick coverage.
  • Simulates 6 types of color vision deficiency including full achromatopsia in one tool.
  • Shows original and simulated colors side by side for direct, undistorted comparison.

How to use Color Blindness Simulator

  1. Enter hex colors or paste a comma-separated color palette into the input.
  2. Select the color vision deficiency type from the dropdown.
  3. See the original and simulated colors side by side.
  4. Toggle between deficiency types to check all common variants.
  5. Select the color vision deficiency type from the dropdown (deuteranopia, protanopia, tritanopia, etc.).
  6. See the original and simulated colors side by side in the comparison panel.
  7. Toggle between deficiency types to check all common variants (a CVD-friendly palette must work for all of them).

When to use Color Blindness Simulator

  • Verifying that charts and graphs convey information without relying solely on color.
  • Testing UI state indicators (error/success states) are distinguishable by CVD users.
  • Reviewing a brand palette for accessibility before finalizing it.
  • Checking maps or data visualizations for color-independent readability.
  • Verifying that charts and graphs convey information without relying solely on color (WCAG 1.4.1).
  • Testing UI state indicators (error/success/warning states) are distinguishable by CVD users.

Examples

Red-green status palette under deuteranopia

Input: #22c55e (success), #ef4444 (error)

Output: Both render as muddy yellow-brown tones — visually indistinguishable. Add icons (check, X) or text labels.

CVD-safe blue/orange pair under deuteranopia

Input: #2563eb (blue), #f97316 (orange)

Output: Blue stays blue; orange shifts toward yellow. Pair remains clearly distinct — safe for status colors.

Brand palette under achromatopsia

Input: #f5c842, #d4a82a, #4ade80

Output: All three collapse to similar mid-grays — pure brand recognition lost. Add lightness contrast or shape cues.

Tritanopia map test

Input: #3b82f6 (blue water), #fbbf24 (yellow land)

Output: Both desaturate toward pinkish gray and look near-identical. Use texture or labels for map legends.

Tips

  • Always test deuteranopia first — it's the most common form, affecting ~5% of all males.
  • Pair color with redundant cues: icons, labels, patterns, or position. WCAG 1.4.1 demands this regardless of CVD severity.
  • Avoid red+green pairings for status (success/error). Use red+blue or red+gray instead, or add iconography.
  • Aim for color pairs that remain distinguishable in achromatopsia (grayscale) — that guarantees CVD safety in all simulations.
  • Tritanopia (blue-yellow) is rare but should still be tested, especially for finance and medical UIs where blue is heavy.
  • Use distinct lightness values between paired colors — luminance contrast survives all CVD simulations.

Frequently Asked Questions

What is deuteranopia?▾
Deuteranopia is the most common form of red-green color blindness, affecting about 5% of males. People with deuteranopia have reduced green cone sensitivity, making red and green hard to distinguish.
What is the difference between -anopia and -anomaly variants?▾
'-anopia' (e.g. deuteranopia) indicates complete absence of one cone type. '-anomaly' (e.g. deuteranomaly) indicates reduced sensitivity rather than complete absence — resulting in less severe but still significant color vision differences.
Does WCAG require color-blindness testing?▾
WCAG 1.4.1 (Level A) requires that color is not the only means of conveying information. While it does not mandate specific CVD testing tools, simulating color blindness is the standard way to audit compliance.
What percentage of people are color blind?▾
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Red-green color blindness (deuteranopia and protanopia combined) is the most prevalent.
Can I simulate color blindness on an entire image?▾
Color palette simulation is supported. Image-level simulation may have limited support depending on the implementation version.
Which simulation algorithm is used?▾
The tool uses the Brettel-Viénot-Mollon simulation matrices, which are scientifically validated and match Chrome DevTools and academic accessibility research output.

Explore the category

Color Converter Convert between HEX, RGB, HSL Color Palette Generator Generate random five-color hex palettes, lock favorites, and copy colors instantly. JSON to TypeScript Generate TypeScript types and interfaces from JSON samples. SemVer Tester Diff Validate and compare semantic versions, including bump classification. MIME Type Lookup Find MIME types from extensions and reverse-map MIME to extensions. Schema JSON-LD Generator Generate JSON-LD for common schema types using guided forms.
Color Spaces Explained: RGB, HSL, CMYK, and HEX for Developers RGB and HEX are the same thing in different notations. HSL is much more intuitive for humans. CMYK lives in print. Understanding these disti Apr 2026 · 8 min

Glossary

Color vision deficiency (CVD)
Umbrella term for any inherited or acquired condition that alters typical color perception. Affects roughly 8% of males and 0.5% of females.
Deuteranopia
The most common form of red-green color blindness — green-sensitive cones (M-cones) are absent. Reds, greens, and oranges look similar.
Protanopia
Red-green color blindness in which the long-wavelength (red) cones are absent. Reds appear darker than usual and shift toward gray.
Tritanopia
Rare blue-yellow color blindness — short-wavelength (blue) cones are absent. Affects roughly 0.01% of the population.
Achromatopsia
Total color blindness; the world is perceived in shades of gray. Very rare (1 in 33,000) but the strictest test for color-redundant design.
Anomaly vs anopia
An '-anomaly' suffix means reduced sensitivity (deuteranomaly, protanomaly, tritanomaly). An '-anopia' suffix means complete absence of one cone type — the more severe form.
WCAG 1.4.1 — Use of Color
Level A success criterion: 'Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.'
Brettel-Viénot-Mollon model
1997 simulation algorithm that computes how a CVD viewer would perceive a given sRGB color. Standard in accessibility tooling (Chrome DevTools, Sim Daltonism).