Simulateur de vision
Saisissez l’adresse d’une page et regardez-la à travers huit types de vue, avec la page non filtrée à côté. Les liens, alertes et graphiques qui ne reposent que sur la couleur deviennent faciles à repérer.
Trois capteurs et ce qui arrive quand l’un manque
Votre rétine mesure la couleur avec trois types de cônes, chacun plus sensible à une bande de lumière différente : grandes longueurs d’onde (rouge), moyennes (vert) et courtes (bleu). Le cerveau déduit une couleur en comparant les trois signaux. Si un type est absent ou décalé, certaines de ces comparaisons ne sont plus possibles et des couleurs qui ne diffèrent que sur cet axe finissent par se ressembler.
Les gènes des cônes rouges et verts se trouvent sur le chromosome X, ce qui explique qu’environ 1 homme sur 12 ait une forme de déficience rouge-vert, contre à peu près 1 femme sur 200. La plupart ont un cône affaibli, non absent. Ce qu’ils voient se situe entre la vision normale et la simulation complète montrée ici.
Les huit vues
| Vue | Ce qu’elle modélise | Ce qui a tendance à poser problème |
|---|---|---|
| Vision normale | La référence, affichée sans filtre | |
| Deutéranopie | Aucun cône vert fonctionnel ; avec les formes plus légères, environ 6 % des hommes | Les couleurs d’état rouge et vert, l’orange à côté du vert |
| Protanopie | Aucun cône rouge fonctionnel ; environ 2 % des hommes avec les formes plus légères | Le texte rouge sur fond sombre, qui devient presque noir |
| Tritanopie | Aucun cône bleu fonctionnel ; moins de 1 personne sur 10 000 | Le bleu contre le vert, le jaune contre le rose |
| Achromatopsie | La luminosité seule. C’est aussi une page sur une liseuse monochrome ou une impression en noir et blanc | Tout sens porté par la teinte |
| Basse vision | Netteté réduite, comme lire sans ses lunettes | Les petits textes, les polices fines, les icônes sans libellé |
| Cataracte | Un cristallin voilé et jauni, courant après 60 ans | Le texte gris pâle, les liens bleu clair |
| Écran au soleil | Un téléphone dehors à midi | Tout ce qui a un contraste modeste |
Les trois vues de daltonisme utilisent les matrices de transformation publiées par Machado, Oliveira et Fernandes en 2009, à pleine sévérité, appliquées en RGB linéaire pour que la luminosité reste fidèle. Les autres vues sont construites avec des filtres CSS : niveaux de gris pour l’achromatopsie, un flou de 2,5 pixels pour la basse vision, un flou avec teinte sépia et contraste réduit pour la cataracte et un contraste très réduit avec une luminosité accrue pour le soleil.
Un examen de cinq minutes
- Deutéranopie, puis les liens. Repérez les liens dans un paragraphe. Si vous ne les distinguez plus du texte autour, ajoutez un soulignement.
- Deutéranopie, puis les états. Regardez les erreurs de formulaire, les mentions de stock, les points « en ligne » et les légendes de graphiques. Un message rouge et un message vert devraient aussi se distinguer par une icône ou un mot.
- Achromatopsie. Vérifiez que le bouton principal se démarque encore du bouton secondaire. Si les deux deviennent du même gris, la teinte était leur seule différence.
- Basse vision. Vous devriez encore pouvoir trouver le titre, la navigation et l’action principale grâce à leur forme et à leur position.
- Soleil, en largeur mobile. Tout texte qui disparaît ici est le texte à foncer en premier. Mesurez-le avec le calculateur de rapport de contraste.
Les WCAG posent la règle derrière tout cela dans le critère de succès 1.4.1 : la couleur ne doit pas être le seul moyen visuel de transmettre une information.
Comment l’aperçu est fabriqué et ses limites
Notre serveur télécharge le HTML (jusqu’à 2,5 Mo), retire tous les scripts, cadres et gestionnaires d’événements, puis envoie le résultat à votre navigateur, qui l’affiche dans un cadre isolé. Le cadre ne peut ni exécuter de code ni envoyer de formulaires. Ses images, polices et feuilles de style sont demandées par votre navigateur directement au site d’origine.
Cela a deux effets secondaires. Le contenu qu’un site construit avec JavaScript, comme les carrousels, les sections chargées à la demande ou des applications d’une seule page entières, peut être absent ou paraître inachevé. Et certaines polices web refusent de se charger hors de leur propre domaine : la police peut donc différer de celle de la page en ligne.
Une simulation est une approximation, montrée sur votre propre écran à vos propres yeux. Elle est efficace pour révéler où un design dépend de la couleur. Elle ne peut pas dire ce que perçoit une personne donnée. Les retours de personnes ayant une déficience de la vision des couleurs ou une basse vision valent plus que n’importe quel filtre.
Questions fréquentes
Quel est le type de daltonisme le plus courant ?
La deutéranomalie, une réponse affaiblie des cônes verts. Avec la deutéranopie, sa forme complète, elle touche environ 6 % des hommes. C’est pourquoi cet outil s’ouvre sur la vue deutéranopie.
Les daltoniens voient-ils en noir et blanc ?
Presque jamais. L’absence complète de vision des couleurs (achromatopsie) touche à peu près 1 personne sur 30 000. La plupart des personnes ayant une déficience voient beaucoup de couleurs et confondent des paires précises, le plus souvent sur l’axe rouge-vert.
Quelles couleurs peut-on associer sans risque ?
Les paires qui diffèrent nettement par la luminosité restent distinctes sous tous les filtres, par exemple le bleu foncé avec le jaune ou l’orange. Le rouge avec le vert, le vert avec le brun et le bleu avec le violet sont les combinaisons à éviter quand les deux couleurs veulent dire des choses différentes.
Pourquoi ma page a-t-elle l’air cassée dans l’aperçu ?
L’aperçu fonctionne sans JavaScript. Si la mise en page, le menu ou le contenu dépendent de scripts, ces parties seront absentes. Les filtres s’appliquent quand même correctement à tout ce qui s’affiche.
Puis-je tester une page qui demande une connexion ?
Non. Notre serveur demande la page comme un visiteur anonyme et n’a pas accès à votre session : il ne reçoit donc que l’écran de connexion. Pour les pages derrière une connexion, utilisez l’émulation des déficiences visuelles intégrée aux outils de développement de Chrome ou Firefox.