Lisible par tous

Un grand sous-titre

C'est dans le texte courant qu'un faible contraste gêne le plus, car on le lit plus longtemps et en petit. Un lien texte

Bouton

Couleur du texte

Opacité du texte

Couleur de fond

Simulation du daltonisme

Thème

Plus d'informations sur le contraste des couleurs

Vérificateur de contraste des couleurs

Vérifiez qu'un texte est lisible sur son fond avant de publier un design. Choisissez ou tapez une couleur de texte et une couleur de fond, et l'outil affiche le rapport de contraste WCAG 2.x avec un résultat conforme ou non pour AA et AAA, pour le texte normal, le grand texte et les composants d'interface. Un aperçu en direct, une simulation du daltonisme et des corrections proposées vous aident à trouver une paire qui fonctionne. Choisissez une couleur de texte et un fond en HEX, RGB ou HSL. Le rapport de contraste WCAG, les résultats AA et AAA et l'aperçu se mettent à jour pendant la saisie, et les couleurs conformes les plus proches sont proposées. Tout est enregistré dans ce navigateur.

Comment ça marche

Choisissez une couleur de texte et une couleur de fond, ou tapez-les en HEX, RGB ou HSL. Réglez l'opacité du texte s'il est semi transparent.
Lisez le rapport de contraste et les badges AA et AAA pour le texte normal, le grand texte et les composants d'interface, et regardez l'aperçu en direct.
Appliquez une couleur suggérée si la paire échoue, enregistrez les bonnes paires dans votre palette et copiez le CSS dans votre projet.

Des corrections, pas seulement des notes

Quand une paire échoue, l'outil cherche la couleur de texte et la couleur de fond les plus proches, avec la même teinte et la même saturation, qui atteignent AA et AAA, et un clic l'applique. Un texte semi transparent est d'abord mélangé au fond, exactement comme le dessine un navigateur.

Privé et portable

Vos couleurs et votre palette sont stockées uniquement dans ce navigateur. Enregistrez tout en JSON pour le sauvegarder ou le transférer sur un autre appareil, ou enregistrez le résultat en PDF ou en image. Annuler et rétablir couvrent chaque modification.

Questions fréquemment posées

Le vérificateur de contraste est-il gratuit ?

Oui. Il est gratuit, sans compte et fonctionne dans tout navigateur moderne.

Quel rapport me faut-il ?

Le niveau AA du WCAG demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants d'interface comme les bordures de champs et les icônes. Le niveau AAA demande 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Pourquoi 4,48 échoue alors qu'il s'arrondit à 4,5 ?

Les seuils WCAG sont exacts. Un rapport de 4,48:1 est inférieur à 4,5:1 et échoue donc en AA pour le texte normal. L'outil compare la valeur non arrondie, les badges sont donc toujours stricts.