Contraste de couleurs

Collection de quelques outils pour vérifier le contraste des couleurs et générer une palette de couleurs avec les bons contrastes.

Vérifier la conformité des contrastes

Colour Contrast Analyser

L’outil gratuit de vérification du contraste des couleurs créé par TPGi permet de déterminer facilement le rapport de contraste de deux couleurs simplement à l’aide d’un outil pipette. Colour Contrast Analyser (CCA) permet d’optimiser son contenu, y compris le texte et les éléments visuels, pour les personnes ayant une déficience visuelle comme le daltonisme et les malvoyants.

Ses principales fonctionnalités :

  • Vérifie les combinaisons de couleurs de premier plan et d’arrière-plan pour déterminer si elles donnent une bonne visibilité de couleurs.
  • Basé sur les algorithmes proposés par le W3C.

Télécharger le logiciel CCA

Extensions de navigateur

WCAG Color Contrast Checker

L’extension vérifie le contraste des couleurs entre le premier plan et l’arrière-plan des éléments qui se trouvent dans la page selon les WCAG 2.1.
Il évalue le contraste sur tous les éléments de la page en tenant compte de leur style calculé pour les propriétés CSS color et background-color.
Dans le cas où ces couleurs sont définies avec des valeurs RGBA, il considère également l’opacité pour en déduire la couleur réelle qui est finalement affichée.
Il peut simuler le daltonisme et évaluer le contraste pour les simulations. De cette façon, les développeurs peuvent voir à quoi ressemblent les pages pour les utilisateurs daltoniens.
L’outil comprend également deux champs dans lesquels les couleurs peuvent être introduites manuellement pour être testées. Il permet également de choisir la couleur directement à partir des documents par l’intermédiaire d’une pipette.

NoCoffee

NoCoffee peut être utile pour comprendre les problèmes rencontrés par les personnes ayant des problèmes de vision légers à extrêmes, tels que :

  • Faible acuité : certaines pages Web utilisent un texte très petit ou des cibles de clics. S’il est vrai que les utilisateurs utilisent un zoom de navigateur intégré ou des loupes d’écran comme ZoomText, de nombreux utilisateurs non techniques ne savent pas comment.
  • Sensibilité au contraste faible : de nombreux concepteurs utilisent du texte avec un contraste très faible, par ex. texte gris clair sur blanc.
  • Daltonisme : bien que l’utilisation de la couleur dans le design soit définitivement une bonne chose, il est important de se rappeler que l’information ne doit pas être uniquement portée par la couleur. Ainsi 8% des hommes sont daltoniens et 0,5% ds femmes sont daltionniennes.
  • Neige visuelle, éblouissement, images fantômes et cataractes.
  • Nystagmus (mouvement oscillatoire rapide, involontaire des yeux).
  • Champ visuel obstrué : corps flottants, obstruction d’un côté (décollement de la rétine ou hémanopie), vision centrale obstruée (glaucome), vision tachetée (rétinopathie diabétique) ou vision périphérique obstruée (rétinite pigmentaire ou dégénérescence maculaire). Remarque : les simulations de champs visuels partiels ne peuvent pas suivre votre regard comme elles le feraient dans le monde réel.

Générer une palette de couleurs accessibles

  • A11y Color Palette : Cet outil vous aide à visualiser une palette entière de toutes les combinaisons de couleurs en gardant l’accessibilité à l’esprit. Les combinaisons sont classées par rapport de contraste des couleurs.
    A11y Color Palette

  • Tanaguru contrast finder : Cet outil vous aide à paramétrer le ratio de contraste, choisir de modifier soit la couleur du texte soit la couleur du fond et choisir des couleurs valides et très proches de la couleur initiale ou une palette de couleurs valides.
    Tanaguru contrast finder