Simulateur de daltonisme
Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs, le plus souvent rouge-vert. Déposez un design, une capture d’écran ou une illustration, choisissez un mode de simulation, puis comparez l’original et le résultat simulé côte à côte. Utile pour vérifier si un graphique, une carte ou une interface reste lisible lorsque vous ne vous fiez pas uniquement à la couleur.
Comment fonctionne le simulateur
-
1
Déposez une image
PNG, JPG, WebP ou SVG. Traité dans le navigateur, rien n'est téléchargé.
-
2
Choisissez un mode de simulation
Sélectionnez protanopie, protanomalie, deutéranopie, deutéranomalie, tritanopie, tritanomalie, achromatopsie ou achromatomalie.
-
3
Comparez côte à côte
Le navigateur applique une transformation matricielle et affiche l'original à côté de la simulation sélectionnée.
-
4
Exportez l'image simulée
Téléchargez la simulation sélectionnée au format PNG ou prenez des captures d'écran de la comparaison pour les revues de design.
Formes de déficience de la vision des couleurs
| Condition | Prévalence | Caractéristique |
|---|---|---|
| Deutéranomalie | ~5 % des hommes | Anomalie rouge-vert, cône M décalé |
| Protanomalie | ~1 % des hommes | Anomalie rouge-vert, cône L décalé |
| Deutéranopie | ~1 % des hommes | Cône M absent, rouge-vert à peine distinguable |
| Protanopie | ~1 % des hommes | Cône L absent, perception du rouge décalée |
| Tritanopie | très rare | Cône S absent, axe bleu-jaune effondré |
| Tritanomalie | très rare | Cône S décalé, légère perte bleu-jaune |
| Achromatopsie | extrêmement rare | Daltonisme complet, uniquement en niveaux de gris |
La plupart des designers commencent par la deutéranopie et la protanopie, car les déficiences rouge-vert sont les plus fréquentes, puis ajoutent les modes anomalie et bleu-jaune pour une vérification plus large.
Implications pour le design
- Ne comptez pas uniquement sur le rouge/vert pour distinguer les états. Les indicateurs d’erreur/succès ont besoin d’une forme, d’une icône ou d’un label textuel en plus de la couleur. Une croix rouge et une coche verte sont perceptiblement différentes ; des cercles rouges et verts ne le sont pas.
- Graphiques : utilisez des remplissages par motifs, des étiquettes directes ou des palettes perceptuellement distinctes (ColorBrewer, Viridis). Évitez la palette des feux de circulation pour la visualisation des données.
- Cartes : bordures et hachures pour distinguer les régions ; la couleur seule échoue.
- Hyperliens : jamais stylisés uniquement par couleur. Les soulignements ou le poids aident tout le monde, y compris les personnes ayant une vision des couleurs normale.
- Champs de formulaire requis : un astérisque rouge plus un label “Requis” ou une bordure rouge plus un texte d’aide “Requis”.
- Indicateurs de statut : le rouge/ambre/vert des feux de circulation fonctionne comme un renforcement, jamais comme le seul signal.
Bon choix de palettes pour un design accessible aux daltoniens
- Viridis (utilisé par défaut dans matplotlib, D3) : violet à jaune, perceptuellement uniforme.
- ColorBrewer qualitatif : 8 teintes distinctes conçues pour rester distinguables dans les formes courantes de CVD.
- Okabe-Ito : palette de 8 couleurs spécifiquement conçue pour l’accessibilité des daltoniens.
Outils et tests
- Aperçus du simulateur (cet outil), vérification visuelle rapide.
- Vérificateur de contraste WCAG, garantit que le texte reste lisible indépendamment de la perception des couleurs.
- Tests avec de vrais utilisateurs, rien ne remplace le fait de montrer votre design à de véritables utilisateurs daltoniens.
Fait amusant
Les simulateurs modernes de vision des couleurs utilisent des approximations matricielles de la façon dont les réponses des cônes sont projetées en RGB. Considérez l’aperçu comme une aide pratique pour le design, pas comme un diagnostic médical ni comme la perception exacte d’une personne donnée.
Questions fréquentes
C’est une approximation utile, mais la perception réelle des couleurs varie d’une personne à l’autre. La plupart des déficiences rouge-vert se situent sur un spectre de léger à sévère : utilisez donc l’aperçu comme signal de design, pas comme diagnostic.
La deutéranomalie couvre la plus grande part des utilisateurs daltoniens (~5 % des hommes). Vérifier le rendu en deutéranopie (la forme sévère) est un contrôle prudent, si un design fonctionne dans ce cas, il fonctionne aussi pour l’anomalie plus légère.
Oui, bien que beaucoup moins souvent (~0,5 %). La déficience rouge-verte est récessive liée à l’X, donc les hommes (XY) n’ont besoin que d’un X affecté ; les femmes (XX) ont besoin des deux. La tritanopie est autosomique et affecte les sexes de manière égale.
Pas directement dans cet outil, c’est une simulation générale de basse vision, qui implique également le flou et la réduction du contraste. Pour une simulation complète d’accessibilité, des outils dédiés comme Lighthouse de Chrome ou NoCoffee couvrent cela.
Outils similaires
Créateur de tier list
Créez une tier list privée avec textes et images locales, personnalisez les niveaux, classez au clavier ou par glisser-déposer et exportez.
Générateur de graffitis
Créez un texte façon graffiti avec des effets tag, bulle, bloc, pochoir, néon et wildstyle. Réglez les couleurs et exportez-le en PNG ou SVG.
Compresser GIF
Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.
Créateur de papier à en-tête
Créez un papier à en-tête réutilisable avec vos coordonnées, couleurs et logo ou initiales. Prévisualisez en A4 ou US Letter, puis imprimez, enregistrez en PDF depuis le navigateur ou téléchargez un PNG.
Générateur de codes-barres
Créez dans le navigateur un code-barres 1D en Code 128, EAN, UPC, ITF-14 ou autre format pris en charge, puis téléchargez-le en SVG ou PNG.
Générateur de codes QR
Générez localement dans le navigateur un code QR à partir d’une URL, de texte ou d’une charge QR correctement formatée, puis téléchargez-le en PNG.