10 outils pour vérifier les contrastes de couleurs WCAG
Publié le
Le contraste insuffisant est le problème d'accessibilité le plus courant sur le web : il touche plus de 80 % des pages analysées par WebAIM. Et c'est aussi l'un des plus faciles à corriger, à condition d'avoir le bon outil sous la main. En voici dix, classés du plus rapide au plus complet.
Les outils en ligne
1. WebAIM Contrast Checker
On entre deux codes hex, le ratio s'affiche instantanément avec le pass/fail AA et AAA. La pipette intégrée permet de prélever les couleurs directement sur une page. C'est celui à ouvrir en premier.
2. WebAIM Link Contrast Checker
Pour les liens identifiés uniquement par leur couleur, sans soulignement. Il vérifie trois ratios d'un coup : lien/texte, lien/fond, texte/fond. Le genre de détail qu'on oublie et qui échoue souvent.
3. Accessible Colors
Au lieu de juste dire « ça passe pas », il propose des couleurs alternatives qui atteignent le ratio. Pratique quand la palette est imposée par une charte et qu'il faut ajuster une nuance sans tout casser.
4. WhoCanUse
Il montre comment une combinaison de couleurs est perçue par des personnes atteintes de différents types de daltonisme, de cataracte ou de sensibilité au contraste. Pas de ratio, juste l'impact réel rendu visible.
Les extensions navigateur
5. WAVE
WAVE analyse une page entière et affiche les erreurs directement dessus. Chaque élément dont le contraste est insuffisant est signalé, avec le ratio. Il ne détecte pas le texte intégré dans des images ou sur des dégradés.
6. axe DevTools
L'extension de Deque scanne la page et classe les erreurs par gravité, avec des pistes de correction. La version gratuite est limitée à 14 jours, largement assez pour un audit ponctuel.
7. Spyglass Contrast Checker
Une surcouche flottante sur n'importe quelle page. On clique sur l'icône, on sélectionne un élément, les couleurs avant-plan et arrière-plan sont capturées instantanément. Il gère aussi les états de survol, ce que beaucoup d'outils ne font pas.
8. DigitalA11Y Color Contrast Checker
Gratuit, sans limite de durée. On sélectionne un élément, le ratio s'affiche. Il propose aussi des palettes alternatives qui passent les seuils WCAG tout en restant correctes visuellement.
Les applications de bureau
9. Colour Contrast Analyser (CCA)
Sa pipette fonctionne partout à l'écran, pas seulement dans un navigateur. Un PDF, une maquette Figma ouverte dans un autre logiciel, une capture d'écran. Il affiche le pass/fail WCAG et simule aussi certains types de daltonisme. Gratuit.
Les plugins de design
10. Stark
Intégré directement dans Figma. Il vérifie le contraste de chaque style de texte, propose des alternatives, et simule différents types de daltonisme. L'avantage, c'est de corriger pendant la conception, avant que le problème arrive dans le code.
Celui qui est déjà là
Chrome DevTools intègre un vérificateur de contraste. On inspecte un élément, on ouvre le panneau des styles, et la section « Contrast » affiche le ratio avec le statut AA/AAA. Aucune installation. C'est le réflexe gratuit qui devrait venir en premier.
