Vérifier les contrastes : comparer les outils
Les ratios de contraste de WCAG 2.2 se calculent à la main, mais personne ne le fait. Quatre familles d'outils comparées sur les mêmes critères, avec ce que chacune détecte et ce qu'elle laisse passer.
Les règles de contraste de WCAG 2.2 sont précises : un rapport de luminance minimal de 4,5 pour 1 pour le texte courant, 3 pour 1 pour le grand texte. On pourrait les calculer à la main avec la formule de luminance relative. Personne ne le fait, et c’est heureux : des outils s’en chargent. Reste à choisir celui qui convient. Ce comparatif examine quatre familles d’outils de vérification de contraste selon les mêmes critères.
DOSOBE n’édite aucun de ces outils ; les exemples cités sont des références courantes, sans classement ni note.
Ce qu’il faut mesurer
WCAG 2.2, niveau AA, fixe trois seuils à respecter :
| Élément | Rapport minimal | Critère |
|---|---|---|
| Texte courant | 4,5:1 | 1.4.3 |
| Grand texte (18 pt ou 14 pt gras et plus) | 3:1 | 1.4.3 |
| Composants d’interface et éléments graphiques porteurs d’information | 3:1 | 1.4.11 |
Le référentiel français RGAA reprend ces exigences. Une quatrième règle, souvent oubliée, interdit que la couleur soit le seul moyen de transmettre une information (critère 1.4.1) : un outil de contraste ne la vérifie pas.
Quatre familles d’outils
- Vérificateur en ligne. On saisit deux couleurs, on lit le rapport. Exemples : le vérificateur de contraste de WebAIM, ou Contrast-Finder (Accessibility Contrast Finder), qui propose en plus des couleurs de remplacement conformes.
- Application de bureau avec pipette. Le Colour Contrast Analyser de TPGi permet de prélever les couleurs directement à l’écran, y compris dans des applications hors navigateur.
- Extension ou outil de développement du navigateur. Les outils intégrés des navigateurs affichent le rapport de contraste d’un texte sélectionné, et des extensions comme axe DevTools le contrôlent dans la page.
- Audit automatisé. Des outils comme Lighthouse, axe-core ou Pa11y analysent un ensemble de pages et listent les paires de couleurs non conformes.
Comparaison sur les mêmes critères
| Critère | Vérificateur en ligne | Application avec pipette | Extension / outils navigateur | Audit automatisé |
|---|---|---|---|---|
| Usage typique | Choix de palette, conception | Maquettes, applications, PDF | Contrôle d’une page en développement | Contrôle de masse, intégration continue |
| Saisie des couleurs | Manuelle | Pipette à l’écran | Lecture directe du rendu | Automatique |
| Couverture | Une paire à la fois | Une paire à la fois | Éléments sélectionnés ou page | Ensemble des pages analysées |
| Suggestions de correction | Selon l’outil | Limitées | Variables | Rapport d’erreurs, rarement de corrections |
| Texte sur image ou dégradé | Non | Partiel, selon le point prélevé | Souvent signalé « à vérifier » | Souvent signalé « à vérifier » |
| États (survol, focus, désactivé) | À tester séparément | À tester séparément | Partiellement | Rarement |
| Courbe d’apprentissage | Très faible | Faible | Moyenne | Moyenne à élevée |
| Intégration au processus | Manuelle | Manuelle | Dans le travail du développeur | Automatisable dans la chaîne de livraison |
Ce que chacun fait de mieux
- Idéal à la conception, avant que la palette soit figée
- Aucun prérequis technique
- La pipette couvre aussi les applications hors web
- Détectent les écarts sur le site réel
- Permettent de contrôler des centaines de pages
- S’insèrent dans les tests avant mise en ligne
Ce qu’aucun outil ne fait
- Juger un texte posé sur une photographie ou un dégradé : le contraste varie sur la longueur du texte.
- Vérifier que l’indication de focus reste visible sur tous les fonds.
- Repérer une information portée par la seule couleur (rouge pour une erreur, vert pour un succès, sans autre indice).
- Évaluer le confort réel de lecture : un rapport conforme sur une très petite taille ou un graisse très fine reste difficile à lire.
Les outils automatiques détectent une partie seulement des défauts de contraste. Ils servent de filtre, pas de certificat. Un contrôle manuel sur les cas ambigus et un test avec des utilisateurs concernés complètent la démarche.
Et l’APCA ?
L’algorithme APCA (Accessible Perceptual Contrast Algorithm) a été proposé dans les travaux préparatoires de WCAG 3, avec l’ambition de mieux refléter la perception réelle, notamment en tenant compte de la taille et de l’épaisseur du texte. WCAG 3 reste à ce jour un brouillon. Les exigences en vigueur, et celles auxquelles renvoient la réglementation et le RGAA, restent fondées sur le ratio de WCAG 2.x. Vous pouvez consulter l’APCA à titre d’information, mais votre conformité se mesure aujourd’hui avec le ratio.
Une chaîne d’outils raisonnable
- À la conception Valider la palette de marque avec un vérificateur en ligne, et documenter les paires autorisées.
- En développement Contrôler chaque composant avec l’outil du navigateur ou l’extension.
- Avant mise en ligne Lancer un audit automatisé sur l’ensemble des gabarits.
- En recette Vérifier manuellement les textes sur images, les états et les écrans en mode sombre.
Contrôler tôt est largement plus économique que corriger après coup : une palette conforme dès le départ évite de reprendre des centaines de composants. Notre expertise web accessible et la page accessibilité et inclusion présentent notre approche, et le diagnostic permet de situer votre site par rapport au RGAA.
Questions fréquentes
Quels ratios de contraste exige WCAG 2.2 ?
Niveau AA : au moins 4,5:1 pour le texte courant, 3:1 pour le grand texte (à partir de 18 points, ou 14 points en gras), et 3:1 pour les composants d'interface et les éléments graphiques porteurs d'information (critère 1.4.11).
Un outil automatique suffit-il à valider l'accessibilité des couleurs ?
Non. Il détecte les paires de couleurs mesurables, mais ne voit pas les textes sur image ou dégradé, les états au survol ou au focus non rendus, ni le sens porté uniquement par la couleur.
Qu'est-ce que l'APCA ?
Un algorithme de contraste perceptif proposé dans les travaux préparatoires de WCAG 3. À ce jour, WCAG 3 reste un brouillon ; les exigences en vigueur reposent sur le ratio de WCAG 2.x.
Le RGAA exige-t-il les mêmes ratios ?
Oui, le référentiel français RGAA reprend les critères de WCAG 2.x, avec des tests associés pour la vérification des contrastes.