How do my colors look to people with color blindness?
Color blindness simulator - see how your colors / designs look to people with different types of color blindness.
Four types: protanopia (no red receptors, ~1% of men), deuteranopia (no green, ~1.2% of men), tritanopia (no blue, rare), achromatopsia (full color blindness, very rare).
Check a single color or a whole image / screenshot. Algorithm based on Brettel/Vienot/Mollon matrices - the same ones used by Chrome DevTools.
How to use it
- Pick mode: "Color" (single hex) or "Image" (photo / page screenshot).
- Color mode: type a hex / pick / use the screen eyedropper / click one of 8 sample colors. On the right you see 5 versions: original + 4 types with affected population.
- Image mode: upload a file (PNG, JPG, WebP, AVIF, HEIC), see four simulations next to the original.
- Note: matrices simulate the "severe" forms. Most color-blind people have anomalies ("protanomaly") - they see some color, just dimmer. The simulator shows the "worst case".
- Designers: before sending a mockup - always check deuteranopia (most common) and protanopia. If your accent color is invisible to deuteranopes, add a secondary indicator (icon, contrast).
When this is useful
Where the color blindness simulator pays off - typical scenarios:
- Web design / a11y - before shipping a design, check whether red/green links, error/success states, color charts are distinguishable for deuteranopes (~1.2% of users, 8% of men).
- Charts - red and green bars look identical to a deuteranope. Add patterns (stripes, dots) or labels.
- Game UI - red/green health/damage indicators - nearly unreadable for ~5% of male players.
- Accessibility audits - WCAG 1.4.1 requires: "color is not the only visual means of conveying information". The simulator shows why. Pair it with the contrast checker to cover WCAG 1.4.3 (text contrast) in the same pass.
- Education - see why GitHub's green/red arrows work (different shape), but a tutorial that says "click the green button" fails (color alone). To pick a safer accent, swap colors in the color converter.
Questions and answers
Roughly accurate. We use Brettel et al. 1997 / Machado 2009 matrices - the same ones used by Chrome DevTools, Photoshop, Sim Daltonism (popular macOS app). "Severe form" simulation. Color-blind people with anomaly (not full blindness) see more than the simulator suggests. For "worst-case design check" this is the standard approach.