Color Blindness Simulator
Preview how your colors look to color-blind users.
Updated June 2026
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.
How to use the Color Blindness Simulator
- 1
Pick a color
Use the native color picker or type a 3- or 6-digit hex value. The two stay in sync.
- 2
Compare the swatches
See the original next to protanopia, deuteranopia, tritanopia and achromatopsia previews.
- 3
Copy a result
Click any swatch to copy its simulated hex for documentation or further testing.
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
Related tools
Color Picker
Explore any color — variations, harmony and accessibility.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background and see AA/AAA pass or fail.
Color Names
Browse named colors with their hex and RGB codes.
Color Palette Generator
Auto-generate balanced color palettes.
CSS Gradient Maker
Build CSS gradients with a live preview.
Palette Creator
Build a color palette from scratch.
Embed this tool
Free to use on your own site — it stays fast and private for your visitors.
Paste this where you want the tool to appear:
<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>