Simulateur de daltonisme et de basse vision

Choisissez une capture d'écran, une maquette ou une photo, puis un trouble de la vision : l'image s'affiche telle qu'une personne concernée la perçoit, à côté de l'original.

Image d'exemple (présentation d'Accessia). Capture d'écran, maquette ou photo : l'image reste sur votre appareil, rien n'est envoyé.

Voir comme une personne atteinte de…

Deutéranopie : Le vert n'est pas perçu : rouges et verts se confondent.

Vision habituelle
Image d'exemple (présentation d'Accessia), sans simulation
Simulation : Deutéranopie
Image d'exemple (présentation d'Accessia), simulation : Deutéranopie

Rendre la maquette lisible sans les couleurs

  • RGAA 3.1 : Ne transmettez jamais une information uniquement par la couleur : doublez-la d'un texte, d'une icône, d'un motif ou d'un soulignement (liens dans un paragraphe, champs en erreur, légendes de graphiques, statuts).
  • RGAA 3.2 : Contraste du texte : au moins 4,5:1, ou 3:1 pour le texte de grande taille (24 px, ou 18,5 px en gras).
  • RGAA 3.3 : Composants d'interface et éléments graphiques porteurs d'information (bordures de champs, icônes, courbes) : contraste d'au moins 3:1 avec leur environnement.
  • Conseil : Méfiez-vous des paires rouge / vert pour « erreur / succès » : ce sont les couleurs le plus souvent confondues.

Pourquoi simuler

Une interface peut sembler claire à son équipe et devenir ambiguë pour une partie du public : un statut rouge ou vert, un lien qui ne se distingue que par sa couleur, un texte gris clair sur fond blanc. La simulation rend ces problèmes visibles avant qu'ils n'atteignent les utilisateurs.

Ce qu'il faut ensuite vérifier

  • Aucune information n'est donnée par la couleur seule (RGAA 3.1).
  • Le contraste du texte atteint 4,5:1, ou 3:1 pour le grand texte (RGAA 3.2) : mesurez-le avec le vérificateur de contraste.
  • Les composants et graphiques porteurs d'information atteignent 3:1 (RGAA 3.3).

Pour simuler directement sur vos pages, utilisez l'extension Chrome Accessia ; pour vos maquettes, le plugin Figma. Et pour contrôler toutes les couleurs d'une page d'un coup, lancez un audit.

Questions fréquentes

Mon image est-elle envoyée sur un serveur ?

Non. L'image est affichée directement dans votre navigateur à travers des filtres : elle ne quitte pas votre appareil.

Quels types de daltonisme sont simulés ?

Les formes partielles et complètes des trois familles : deutéranomalie et deutéranopie (vert), protanomalie et protanopie (rouge), tritanomalie et tritanopie (bleu), ainsi que l'achromatomalie et l'achromatopsie (vision sans couleur).

La simulation suffit-elle à vérifier le RGAA ?

Non, c'est une aide pour se mettre à la place des utilisateurs. La conformité se vérifie critère par critère : aucune information ne doit être donnée par la seule couleur (critère 3.1) et les contrastes doivent atteindre les seuils (critères 3.2 et 3.3).

Sur quelle méthode reposent les simulations de daltonisme ?

Sur le modèle de Machado, Oliveira et Fernandes (2009), appliqué aux couleurs en espace linéaire. Les effets de basse vision sont des approximations : chaque personne voit différemment.