Comment utiliser : 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.
Aussi recherché comme : colorblind, color blind test, protanopia, deuteranopia, tritanopia, cvd simulator, accessibility.
Outils complémentaires : 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.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
- Compresseur d’images — Réduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.
Questions fréquentes
Is my image uploaded?
No. The image is drawn onto a canvas and processed entirely in your browser.
Which color blindness type is most common?
Deuteranomaly (reduced green sensitivity) is the most common, followed by protanomaly. Together they are often called red–green color blindness.
How accurate is the simulation?
It uses the Machado et al. (2009) model, a standard in accessibility tools. It is a good approximation, but real perception varies between individuals and with screen settings.
What should I check in my design?
Status colors (success/error), links that differ from text only by color, chart legends and map colors. If meaning disappears in a simulation, add a non-color cue.
Puis-je installer Color Blindness Simulator en tant qu’application web et l’utiliser hors ligne ?
Oui. Color Blindness Simulator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.