Vérificateur de contraste des couleurs

Vérifiez les couleurs de texte et de fond selon les rapports de contraste WCAG 2.1, avec APCA Lc comme second avis.

Comment vérifier le contraste des couleurs

  1. Saisissez la couleur du texte et celle du fond. Utilisez le sélecteur de couleurs ou tapez un code hex à 3 ou 6 chiffres.
  2. Lisez le rapport de contraste et le résultat réussi ou échoué pour le petit texte (AA et AAA), le grand texte (AA) et les composants d’interface comme les icônes et les bordures.
  3. Consultez la valeur APCA Lc comme second avis. Elle décrit la lisibilité du texte et sert de repère plutôt que de verdict réussi ou échoué.
  4. Si la paire échoue, utilisez la correction automatique pour amener la couleur du texte à la luminosité la plus proche qui atteint 4,5:1, ou inversez les couleurs pour tester l’inverse. L’aperçu en direct montre la paire sur un titre, un texte courant et des boutons.

Ce que vous pouvez faire

  • Rapport de contraste WCAG 2.1

    Obtenez le rapport exact et les résultats AA et AAA pour le texte normal, le grand texte et les éléments d’interface non textuels.

  • APCA Lc

    Consultez le contraste de luminosité APCA avec un usage en langage clair, de « Recommandé pour le texte courant » à « Illisible ».

  • Correction automatique

    Décalez une couleur de texte insuffisante vers la luminosité la plus proche qui atteint AA à 4,5:1.

  • Aperçu en direct

    Voyez votre paire sur un titre, un texte courant et des boutons avant de la retenir.

  • Explications en langage clair

    Une courte note explique ce que le résultat signifie pour le texte courant et pour le grand texte.

Questions fréquentes

Comment vérifier le contraste des couleurs ?

Saisissez la couleur du texte et celle du fond dans le vérificateur. Il calcule le rapport de contraste WCAG et indique si la paire respecte AA et AAA pour le petit texte, le grand texte et les composants d’interface. Vous pouvez saisir des codes hex ou utiliser les sélecteurs de couleurs.

Quel rapport de contraste WCAG exige-t-il ?

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

Qu’est-ce qu’un grand texte selon WCAG ?

Un texte de 24 pixels CSS (18 points) ou plus, ou de 18,66 pixels (14 points) ou plus lorsqu’il est en gras. Un grand texte demande un rapport plus faible, car les lettres plus grandes se lisent plus facilement.

Qu’est-ce que l’APCA et faut-il l’utiliser ?

L’APCA est une méthode de contraste perceptuel issue des brouillons de WCAG 3. Elle renvoie une valeur Lc ; le vérificateur considère qu’un Lc de 75 ou plus convient au texte courant et qu’un Lc de 45 ou plus est le minimum pour un texte grand ou en gras. Les rapports WCAG 2 restent ce que demandent la plupart des normes et des audits : vérifiez donc les deux.

L’ordre des deux couleurs a-t-il une importance ?

Pas pour le rapport WCAG, qui est identique quelle que soit la couleur du texte. Pour l’APCA, oui, car le résultat dépend de la couleur du texte et de celle du fond. Utilisez Inverser pour comparer dans les deux sens.

Quel est le contraste du noir sur blanc ?

Il est de 21:1, le rapport le plus élevé possible. Le plus bas est 1:1, c’est-à-dire une couleur sur elle-même.