Colorblind Simulator
Last updated: 2026-06-25
The Colorblind Simulator converts your color to show how it appears under protanopia, deuteranopia, and tritanopia, displaying them side by side.
Use it to check whether designs that rely on color alone stay distinguishable for users with color vision deficiency.
Enter a color
Converted result by deficiency type
Each cell is an approximate simulation of how the same color appears under that color vision deficiency.
This simulation is an approximation based on LMS transform matrices and may differ from an individual's actual color perception. Use it for fun and reference, and confirm final review with real user testing.
How to use
- Enter a color — Enter the color to check with the color picker or HEX.
- Run the simulation — Press the button to show normal vision alongside the converted color for each deficiency type.
- Compare & review — Compare the converted colors by type to see whether they are hard to tell apart by color alone.
Types of color vision deficiency and design considerations
Color vision deficiency occurs when some of the retina's cone cells (L, M, S) are missing or weakened, causing colors to be perceived differently from normal vision. The most common red-green deficiency makes reds and greens hard to tell apart, while the rarer blue-yellow deficiency affects blues and yellows.
| Type | Affected cone | Characteristics |
|---|---|---|
| Protanopia | L (long wavelength, red) | Reds look dark and dull (red-green confusion) |
| Deuteranopia | M (medium wavelength, green) | Most common type, red-green confusion |
| Tritanopia | S (short wavelength, blue) | Rare, confuses blue, yellow, and green |
| Achromatopsia | All | Very rare, perceives only lightness (grayscale) |
The key is to design without relying on color alone. Use icons and text alongside color for status indicators, and add patterns and labels beyond color in charts. Because color vision deficiency reduces hue distinction, luminance contrast matters more — check the contrast ratio with the contrast checker, and see the Web Color Contrast & Accessibility guide for detailed principles.
Frequently Asked Questions (FAQ)
What types of color blindness are there?
The main groups are red-green color blindness — protanopia and deuteranopia — and blue-yellow color blindness — tritanopia. Red-green is the most common; about 8% of men are estimated to have some form of color vision deficiency.
Is this simulation accurate?
This tool is an approximate simulation using LMS transform matrices for color vision deficiency, and it may differ from an individual's actual color perception. Use it as a reference for design review, and confirm important decisions with real user testing.
What should I do for colorblind users?
Do not rely on color alone — pair it with text labels, icons, and patterns. In particular, avoid using red and green by themselves to indicate state (success/failure), and keep sufficient luminance contrast so colorblind users can still tell items apart.
Should I check contrast too?
Yes. Color vision deficiency reduces hue distinction, so luminance contrast matters even more. Checking the WCAG contrast ratio of foreground/background with the contrast checker helps ensure readability that does not depend on color.
Related tools & guides
Contrast Checker
Secure readability that does not depend on color using luminance contrast.
Color Palette Generator
Check whether a scheme stays distinguishable under color vision deficiency.
CSS Gradient Generator
Review gradient color distinguishability.
Web Color Contrast & Accessibility
A guide to accessible color design.
Last updated: 2026-06-25