Que mesure un vérificateur de contraste ?
Un vérificateur de contraste compare la luminance relative d'une couleur de premier plan et d'une couleur d'arrière-plan. Le résultat est affiché sous forme de ratio de 1:1, lorsque les couleurs sont visuellement identiques, jusqu'à 21:1, lorsque le noir et le blanc ont un contraste maximal.
Cet outil affiche des indicateurs de réussite/échec de type WCAG pour le texte normal et le texte large. Il est utile pour les décisions de conception préliminaires, les états des composants, les jetons de thème et les vérifications rapides avant un examen d'accessibilité plus complet.
Comment lire les résultats
| Check | Ratio minimum | Meaning |
|---|---|---|
| AA texte normal | 4.5:1 | Objectif courant pour le texte de corps régulier. |
| AA texte large | 3:1 | S'applique au texte plus grand ou plus épais où les formes des lettres sont plus faciles à lire. |
| AAA texte normal | 7:1 | Objectif plus strict pour le texte normal dans des contextes à haute accessibilité. |
| AAA texte large | 4.5:1 | Objectif plus strict pour le texte large. |
Ce que cet outil ne prouve pas
Un ratio est un signal fort, mais il ne constitue pas un audit d'accessibilité complet. La lisibilité réelle dépend aussi de la typographie, du poids de la police, des états hover/focus, des états désactivés, des couleurs environnantes, de la qualité de l'écran et du fait que le texte apparaisse sur des images ou des dégradés.
- La transparence et les dégradés nécessitent un examen séparé.
- Les petites icônes et les traits fins peuvent nécessiter un contraste plus élevé que le texte voisin.
- Les couleurs de marque peuvent réussir dans une paire et échouer dans une autre.
- Le contraste pour la lecture de QR et le contraste de lisibilité du texte sont liés mais ne constituent pas la même vérification.
Façons d'améliorer un contraste faible
Assombrir le premier plan
Pour les arrière-plans clairs, rapprochez la couleur du texte d'un ton neutre plus foncé ou d'une teinte de marque plus soutenue.
Éclaircir l'arrière-plan
De petits ajustements d'arrière-plan peuvent permettre à une couleur de marque de passer sans modifier le jeton de premier plan.
Augmenter la taille ou le poids du texte
Le texte plus grand ou plus gras a un seuil AA plus bas, mais il nécessite toujours une séparation visuelle suffisante.
Vérifiez chaque état
Les états hover, focus, désactivé, sélectionné et erreur utilisent souvent des paires de couleurs différentes.
Questions fréquemment posées
S'agit-il d'un audit complet de conformité WCAG ?
Non. Il calcule des seuils de contraste de type WCAG pour les paires de couleurs. Un examen complet vérifie également la mise en page, le comportement au clavier, la sémantique, les états de focus, les alternatives textuelles et la typographie réellement rendue.
Qu'est-ce qui compte comme texte large ?
Les recommandations WCAG considèrent le texte large comme environ 18 pt en texte normal ou 14 pt en gras et plus. Dans le travail web, vérifiez la taille et le poids réellement rendus, pas seulement l'étiquette de conception.
Puis-je utiliser cet outil pour des couleurs transparentes ?
Ce vérificateur compact utilise des couleurs sRGB opaques. Si votre interface utilise la transparence, mélangez d'abord le premier plan et l'arrière-plan rendus, puis vérifiez la paire résultante.
Le fait de respecter AA signifie-t-il que la conception est toujours lisible ?
Pas toujours. Les polices très fines, les petites étiquettes d'interface, les arrière-plans chargés et les écrans de faible qualité peuvent encore rendre le texte difficile à lire. Considérez le ratio comme un signal important.
Est-ce la même chose que le contraste des codes QR ?
Non. Le contraste des codes QR affecte la fiabilité du scanner, tandis que cet outil se concentre sur les seuils de lisibilité du texte. Les calculs sont liés, mais la décision pratique diffère.