Vérificateur de contraste des couleurs
Assurez-vous que votre texte se lit facilement pour tout le monde, et obtenez une correction quand ce n’est pas le cas.
Scellé sur cet appareil
Fonctionne dans votre navigateur. Rien n’est envoyé.
Scellé
Couleurs
- Ratio de contraste
- Texte normal
- AA · 4,5:1
- AAA · 7:1
- Grand texte
- AA · 3:1
- AAA · 4,5:1
- Éléments d’interface et icônes
- AA · 3:1
- Contraste APCA (pour information)
L’APCA est une méthode plus récente, à l’étude pour de futures règles d’accessibilité. Les WCAG 2.2 restent la référence aujourd’hui.
Aperçu
Un grand texte se lit ainsi
Un texte normal doit rester facile à lire pour tout le monde, y compris les personnes malvoyantes, sur un téléphone en plein soleil ou sur un vieil écran.
Les petits caractères et les légendes ont besoin du plus fort contraste.
Corrections suggérées
Comment ça marche
-
Saisissez vos deux couleurs
Tapez ou choisissez la couleur du texte et celle du fond. Tous les formats fonctionnent : HEX, RGB, HSL ou un nom CSS.
-
Lisez le résultat
Consultez le ratio de contraste et voyez s’il respecte les niveaux AA et AAA des WCAG 2.2 pour le texte normal, le grand texte et les éléments d’interface.
-
Corrigez si besoin
Si un niveau échoue, utilisez l’une des couleurs suggérées : c’est la plus proche, de même teinte, qui le respecte.
Questions fréquentes
Quel ratio de contraste faut-il viser ?
Le niveau AA des WCAG 2.2 demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA demande 7:1 et 4,5:1. Les icônes, les bordures de champs et les autres éléments d’interface doivent atteindre au moins 3:1 par rapport à ce qui les entoure.
Qu’est-ce qu’un grand texte ?
Un texte d’au moins 18 points (24 pixels CSS), ou d’au moins 14 points (environ 18,7 pixels CSS) s’il est en gras. Tout ce qui est plus petit est du texte normal.
Pourquoi 4,49:1 échoue-t-il alors que c’est si proche de 4,5:1 ?
Les seuils WCAG sont des minimums stricts et le ratio ne doit pas être arrondi vers le haut. C’est pourquoi cet outil affiche le ratio arrondi vers le bas : une valeur qui semble conforme l’est vraiment.
Qu’est-ce que l’APCA ?
L’APCA (Accessible Perceptual Contrast Algorithm) est une méthode plus récente de mesure du contraste, qui tient compte du fait que le texte est foncé sur clair ou clair sur foncé. Elle est à l’étude pour une future version des règles. Elle est affichée ici à titre indicatif seulement : aujourd’hui, les exigences légales et les audits se réfèrent au ratio WCAG 2.
Comment les couleurs suggérées sont-elles choisies ?
L’outil conserve la teinte et l’intensité de votre couleur et ne modifie que sa luminosité, dans l’espace colorimétrique perceptuel OKLCH, jusqu’à trouver la valeur la plus proche qui atteint le niveau. Votre couleur reste reconnaissable, juste un peu plus claire ou plus foncée.
Est-ce que ça fonctionne avec les couleurs transparentes ?
Oui pour la couleur du texte : une couleur de texte semi-transparente est d’abord mélangée au fond, car c’est la couleur réellement perçue. Le fond est considéré comme opaque.