Cómo usar: Color Blindness Simulator
- Drop an image, click to choose one, or paste a screenshot with Ctrl+V.
- Compare the original with the simulated versions for each type of color vision deficiency.
- Look for information that disappears — red/green status colors, chart series, error states.
- Switch to Palette to test brand or chart colors and get warnings for pairs that become indistinguishable.
What is color blindness?
Color vision deficiency (CVD) affects roughly 1 in 12 men and 1 in 200 women of Northern European descent. Most people with CVD see colors — just a narrower range. The common types are:
| Type | Affected cones | Effect |
|---|---|---|
| Deuteranomaly / deuteranopia | Green (M) | Red and green are hard to tell apart — the most common form |
| Protanomaly / protanopia | Red (L) | Reds look darker and merge with greens and browns |
| Tritanomaly / tritanopia | Blue (S) | Blue/green and yellow/pink confusions — rare |
| Achromatopsia | All | No color perception — very rare, but a useful greyscale test |
“-anopia” means the cone type is missing; “-anomaly” means it is shifted, a milder form.
How the simulation works
Each pixel is converted to linear RGB and multiplied by the color-vision matrices from Machado, Oliveira and Fernandes (2009), a widely used physiological model — full severity for the “-anopia” types and 60% severity for the “-anomaly” types. Achromatopsia uses relative luminance. Everything runs on a canvas in your browser; large images are scaled to 900px wide for speed.
Designing for color-blind users
- Never rely on color alone (WCAG 1.4.1): add icons, labels, patterns or text to status messages, form errors and chart series.
- Vary lightness, not just hue: a dark green and a light red stay distinguishable for almost everyone. The OKLCH converter makes lightness easy to control.
- Use color-blind-safe chart palettes such as blue/orange instead of red/green.
- Keep text contrast high — check pairs with the Contrast Checker.
Simulations approximate an average experience; individual perception varies, so testing with real users is still valuable.
También se busca como: colorblind, color blind test, protanopia, deuteranopia, tritanopia, cvd simulator, accessibility.
Herramientas que combinan con: Color Blindness Simulator
- APCA Contrast Checker — Calculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for, and compare it with the classic WCAG 2 ratio.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.