Contraste de couleurs

Avec Contraste de couleurs, les designers et intégrateurs web peuvent évaluer un choix de couleurs avant validation de l’accessibilité. Mesurez le contraste WCAG entre deux couleurs.

Mesurez le contraste WCAG entre deux couleurs. L’outil reste gratuit dans votre navigateur et ne demande aucun compte pour afficher le résultat.

Mode d’emploi

Saisissez la couleur de fond, par exemple sous forme de code hexadécimal.
Indiquez la couleur du texte ou de l'élément à comparer avec ce fond.
Lancez la vérification pour obtenir le ratio de contraste entre les deux couleurs.
Lisez les seuils WCAG affichés pour le texte normal, le grand texte et les interfaces.
Testez une autre paire de couleurs si le premier résultat ne vous convient pas.

Exemple

L'exemple compare une couleur sombre et une couleur claire. L'outil calcule le ratio de contraste et affiche les seuils WCAG correspondants. Regardez si le ratio obtenu suffit pour du texte normal, du grand texte ou des éléments d'interface, puis testez une autre paire si votre charte le permet.

Entrée

#0F172A
#FFFFFF

Résultat

Contraste: 17.85:1
Texte normal AA: PASS
Texte normal AAA: PASS
Grand texte AA: PASS

Limites et formats

L'outil compare deux couleurs, pas la lisibilité réelle d'une image ou d'une photo.
Les transparences, dégradés et superpositions ne sont pas toujours représentés.
Un bon ratio ne suffit pas à valider toute l'accessibilité d'une page.
Vérifiez les couleurs des états survolés, actifs et désactivés séparément.
Les valeurs affichées doivent être interprétées selon la taille et l'usage du texte.

Où le traitement a lieu

Tout le calcul de contraste s'exécute dans votre navigateur. Les codes couleur saisis restent sur votre appareil et ne sont envoyés nulle part. Le résultat s'affiche immédiatement après la vérification. Vous pouvez effacer les champs ou fermer l'onglet sans conserver ces valeurs.

Questions fréquentes

Quel ratio faut-il viser pour du texte courant ?

Les seuils WCAG dépendent de la taille et de l'usage du texte. Pour du texte normal, le niveau AA demande généralement un contraste plus élevé que pour du grand texte. Lisez les indications affichées par l'outil pour votre cas précis.

Puis-je utiliser des noms de couleurs comme red ou blue ?

Le champ attend des valeurs de couleur lisibles par l'outil, notamment des codes hexadécimaux. Si un nom n'est pas reconnu, remplacez-le par son code hexadécimal équivalent avant de relancer la vérification.

L'outil vérifie-t-il les contrastes sur une capture d'écran ?

Non, il calcule le contraste entre deux couleurs saisies. Il ne lit pas une image ni une page complète. Pour une maquette, relevez les codes couleur utilisés puis testez chaque paire importante séparément.