utilities
Flexbox Froggy
Learn CSS Flexbox through 24 interactive coding puzzles with frogs.
#flexbox#learning#interactive
New toolFree · No signup
Color Blindness Simulator
Up to 8% of males experience color vision deficiency. This tool simulates how your palette looks across 6 types — from partial red-green deficiency to complete achromatopsia — so you can catch contrast issues before they reach real users.
Share:
Show vision types
Your colors
| Input | Normal | Protanopia no red | Deuteranopia no green | Tritanopia no blue | Achromato. no color |
|---|---|---|---|---|---|
#E74C3C | #E74C3C #E74C3C | #A4A340 #A4A340 | #ADB941 #ADB941 | #DF4344 #DF4344 | #6C6C6C #6C6C6C |
#E67E22 | #E67E22 #E67E22 | #B9B838 #B9B838 | #BFC73E #BFC73E | #E14A4E #E14A4E | #8D8D8D #8D8D8D |
#F1C40F | #F1C40F #F1C40F | #DEDD3B #DEDD3B | #E0E445 #E0E445 | #EF5D65 #EF5D65 | #C0C0C0 #C0C0C0 |
#2ECC71 | #2ECC71 #2ECC71 | #727487 #727487 | #695D8C #695D8C | #36989C #36989C | #A4A4A4 #A4A4A4 |
#1ABC9C | #1ABC9C #1ABC9C | #6062A4 #6062A4 | #574BA6 #574BA6 | #22AAAB #22AAAB | #979797 #979797 |
#3498DB | #3498DB #3498DB | #5F60CB #5F60CB | #5A52C7 #5A52C7 | #39BEBB #39BEBB | #888888 #888888 |
#9B59B6 | #9B59B6 #9B59B6 | #7E7EA0 #7E7EA0 | #82879A #82879A | #988E8A #988E8A | #6E6E6E #6E6E6E |
#34495E | #34495E #34495E | #3D3D59 #3D3D59 | #3C3A58 #3C3A58 | #355554 #355554 | #464646 #464646 |
About these simulations
Protanopia: Missing long-wavelength (red) cones
Protanomaly: Reduced red cone sensitivity
Deuteranopia: Missing medium-wavelength (green) cones
Deuteranomaly: Reduced green cone sensitivity
Tritanopia: Missing short-wavelength (blue) cones
Achromatopsia: Complete absence of color perception
Red-green color blindness affects ~8% of males and 0.5% of females. WCAG recommends never relying on color alone to convey information.
How to use
01
Add your colors
Click each color swatch to change it with the native color picker, or add new colors up to 12 total.
02
Pick vision types
Toggle which color vision types you want to compare using the buttons at the top.
03
Read the grid
Each row is one of your colors. Each column is a vision type. Compare simulated swatches and hex values side by side.
04
Fix problem pairs
If colors look too similar in any column, they may be indistinguishable to users with that type of color vision deficiency.
More accessibility tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.