Color Blindness Simulator
Preview how your colors look to color-blind users.
Original
Simulated
These simulations use standard sRGB transform matrices and are approximations — they show the kind of confusion each deficiency causes, not a clinically exact rendering. Click any swatch to copy its hex.
About this tool
A color blindness simulator shows how a color looks to people with color vision deficiency. Roughly 1 in 12 men and 1 in 200 women see color differently, so designers, developers and accessibility teams use a colorblind checker to make sure their interfaces, charts and brand colors stay distinguishable. Enter any color and this tool renders it as it would appear under the four main types of color blindness.
It simulates protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind) and achromatopsia (total color blindness, seen as grayscale). Each simulated swatch is labeled and shows the resulting hex code, which you can copy with a click — handy for documenting how a palette shifts or for testing whether two colors collapse into the same appearance.
The simulations use standard sRGB transform matrices and are approximations: they convey the kind of confusion each deficiency causes rather than a clinically exact rendering. Everything runs locally in your browser — no colors are uploaded, logged or stored.
Examples
Input
#955f3b (warm brown)
Output
Protanopia #7e7d44 · Deuteranopia #818546 · Tritanopia #924b4c
Red-shifted browns drift toward olive under protan/deutan vision.
Input
#955f3b achromatopsia
Output
#6b6b6b
Total color blindness renders the color as an equal-brightness gray.
Common uses
- Designers checking that brand colors stay distinguishable for color-blind users
- Data-viz developers testing whether chart series collapse under a deficiency
- Accessibility teams auditing status colors (red/green) for safe distinction
- Product teams choosing palettes that work for the ~8% of men with color blindness
- Frontend engineers validating UI states before an accessibility review
- Educators and students learning how the main types of color vision deficiency differ
Frequently asked questions
What types of color blindness does it simulate?
Protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind) and achromatopsia (total color blindness, shown as grayscale) — the four most referenced types.
How accurate is the simulation?
It uses well-known sRGB transform matrices and is an approximation. It conveys the kind of color confusion each deficiency causes, not a clinically exact rendering, but it's a reliable guide for design decisions.
Why does my color look almost grayscale?
Achromatopsia removes all color, converting it to a gray of equal brightness. The other types only shift specific hues, so they usually keep more color than the achromatopsia preview.
How can I use this to improve accessibility?
Test color pairs that carry meaning — like chart series or status colors. If two colors look the same under a simulation, add labels, patterns or brightness differences so they stay distinguishable.
Are my colors uploaded anywhere?
No. Everything runs locally in your browser. Nothing is sent to a server, logged or stored.
Learn more
Embed this tool
Free to use on your own site. It stays fast and private for your visitors.
<iframe src="https://hypercho.com/embed/color-blindness-simulator" title="Color Blindness Simulator by Hypercho" width="100%" height="560" style="border:1px solid #d8cec3;border-radius:16px;max-width:720px" loading="lazy"></iframe>
<p style="font:13px sans-serif"><a href="https://hypercho.com/tools/color-blindness-simulator" target="_blank" rel="noopener">Color Blindness Simulator</a> by <a href="https://hypercho.com" target="_blank" rel="noopener">Hypercho</a></p>Related tools
Doing this by hand every week?Hand it to an AI employee.
A free tool handles one job at a time. If your team repeats a workflow like this every day, we'll design, build and run an AI employee that owns it.
Book a strategy call