Vérifier le rapport de contraste d'accessibilité WCAG entre les couleurs
Un vérificateur de contraste mesure le rapport de contraste entre une couleur de premier plan et une couleur d'arrière-plan, et vous dit s'il respecte les normes d'accessibilité WCAG pour un texte lisible. Le rapport de contraste est un nombre de 1:1 (couleurs identiques, invisible) à 21:1 (noir sur blanc), et plus il est élevé, plus le texte est facile à lire — surtout pour les personnes malvoyantes, avec déficiences de couleur, ou quiconque utilise un écran en plein soleil. Vous saisissez deux couleurs et obtenez le rapport exact plus un clair succès ou échec face aux seuils reconnus.
C'est important car le gris clair sur blanc et d'autres combinaisons à faible contraste paraissent élégants dans un design mais sont vraiment difficiles à lire pour une grande part des utilisateurs, et le contraste est l'un des échecs d'accessibilité les plus courants et les plus vérifiables. Les directives WCAG fixent des minimums précis — 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA — un vérificateur transforme donc « est-ce lisible ? » d'une supposition en réponse vérifiable. Cet outil calcule le rapport dans votre navigateur à mesure que vous ajustez les couleurs.
Sous WCAG AA, le texte normal nécessite au moins 4,5:1 et le grand texte (environ 18pt, ou 14pt gras) nécessite 3:1. Le niveau plus strict AAA demande 7:1 et 4,5:1 respectivement. Le vérificateur montre votre rapport face à ces seuils pour savoir exactement lequel il passe.
Le texte à faible contraste est difficile ou impossible à lire pour les personnes à vision réduite, à déficiences de vision des couleurs, ou quiconque dans un mauvais éclairage. Un contraste suffisant est l'une des exigences d'accessibilité les plus impactantes et facilement mesurables, d'où les minimums explicites de WCAG.
Oui. Un texte plus grand et plus gras est plus lisible à plus faible contraste, la norme assouplit donc l'exigence — 3:1 en AA au lieu de 4,5:1. Le vérificateur tient compte de cette distinction pour que les grands titres soient jugés au bon seuil.
Le maximum est 21:1, du noir pur sur du blanc pur. Le minimum est 1:1, deux couleurs identiques sans aucun contraste. Toute vraie paire de couleurs tombe quelque part entre, et le but est de franchir le seuil pour votre taille de texte.
Générateur de palette · Générateur de dégradé CSS · Mélangeur de couleurs · Trouveur de nom de couleur