DevToolPal
FR

Vérificateur de contraste des couleurs (WCAG)

Vérifiez le rapport de contraste WCAG 2.x entre la couleur du texte et celle du fond, avec réussite AA et AAA pour le texte normal, le grand texte et l'interface, aperçu en direct et la couleur conforme la plus proche.

Traitement local, rien n'est envoyé

Couleurs

Couleur du texte
Couleur de fond

Les couleurs transparentes sont d'abord mélangées : le texte sur le fond, le fond sur du blanc.

Aperçu

Grand texte

Le texte courant doit être facile à lire pour tous, y compris les personnes malvoyantes ou devant un écran peu lumineux.

Bouton

Rapport de contraste

—

Couleurs conformes les plus proches

Ce que fait l’outil

Le vérificateur de contraste indique si une couleur de texte est lisible sur une couleur de fond selon les Règles pour l’accessibilité des contenus Web (WCAG 2.x). Saisissez n’importe quelle couleur CSS pour le texte et le fond — HEX, rgb(), hsl(), un nom de couleur ou une couleur transparente — et vous obtenez le rapport de contraste, la réussite ou l’échec pour chaque critère AA et AAA, ainsi qu’un aperçu en direct. Si la paire échoue, l’outil propose les couleurs de texte et de fond conformes les plus proches, en gardant la même teinte. Tout s’exécute dans votre navigateur.

Mode d’emploi

  1. Saisissez ou choisissez la Couleur du texte et la Couleur de fond. Inverser les échange.
  2. Lisez le Rapport de contraste et la liste des résultats pour le texte normal, le grand texte et les composants d’interface.
  3. Si un niveau échoue, consultez Couleurs conformes les plus proches : chaque suggestion affiche la nouvelle couleur, son rapport, un bouton de copie et Utiliser pour l’appliquer.
  4. Activez APCA pour voir aussi le contraste de luminosité (Lc) du brouillon WCAG 3.

Les couleurs semi-transparentes sont mélangées avant la vérification : le texte sur le fond, et le fond sur du blanc.

Exemple

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Calcul du rapport

La luminance relative de chaque couleur est calculée à partir de ses canaux sRGB (linéarisés, puis pondérés à 21 % de rouge, 72 % de vert et 7 % de bleu). Le rapport vaut (plus claire + 0,05) / (plus foncée + 0,05) et va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur blanc. Seule la luminosité compte, pas la teinte : du rouge pur sur du vert pur paraît très coloré mais n’atteint qu’environ 1,3:1.

Les suggestions ne modifient que la luminosité de la couleur (en HSL) et choisissent la direction, plus foncée ou plus claire, qui demande le moins de changement. Parfois aucune teinte n’y parvient : sur un fond gris moyen, aucune couleur de texte n’atteint 7:1.

FAQ

› Quel rapport de contraste faut-il ?

Le niveau AA des WCAG 2.x exige 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, les icônes et les contours de focus. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. La plupart des lois et politiques renvoient au niveau AA.

› Qu'est-ce qu'un grand texte ?

Un texte d'au moins 24px (18pt) en graisse normale, ou d'au moins 18,66px (14pt) en gras. Tout ce qui est plus petit est du texte normal et nécessite le rapport le plus élevé.

› Pourquoi 4,49:1 est-il un échec ?

Les seuils des WCAG sont exacts : un rapport de 4,499 n'atteint pas 4,5. Ce vérificateur tronque donc le rapport affiché au lieu de l'arrondir à la hausse, et décide de la réussite sur la valeur exacte.

› Qu'est-ce qu'APCA ?

APCA (Accessible Perceptual Contrast Algorithm) est la méthode de contraste proposée pour le brouillon des WCAG 3. Elle donne une valeur de contraste de luminosité Lc qui dépend de la couleur du texte et convient mieux au mode sombre. Ce n'est pas encore une norme légale ; elle est donc affichée ici à titre indicatif.