Logo XTools
XTools

Vérificateur de contraste

Vérifier le contraste du texte et du fond selon WCAG AA et AAA
  • Les fichiers ne quittent pas votre appareil
  • S’exécute dans le navigateur
  • Gratuit, sans compte, sans filigrane

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Comment utiliser Vérificateur de contraste

Vérifiez un couple couleur de texte et couleur de fond selon WCAG 2 (AA et AAA pour le texte normal, le grand texte et les composants d'interface) et voyez le contraste de clarté APCA du brouillon WCAG 3. Lorsqu'un couple échoue, l'outil propose les couleurs réussies les plus proches.

  1. 1

    Saisissez la Couleur du texte et la Couleur de fond en HEX, rgb(), hsl(), oklch() ou un nom de couleur, ou cliquez sur un échantillon pour ouvrir le sélecteur.

  2. 2

    Lisez le Rapport de contraste et le résultat Réussi ou Échoué pour chaque contrôle AA et AAA.

  3. 3

    Regardez l'Aperçu, saisissez votre propre Texte d'exemple, et utilisez Inverser les couleurs pour tester l'inverse.

  4. 4

    Sous Couleurs réussies les plus proches, cliquez sur Appliquer pour une suggestion Ajuster le texte ou Ajuster le fond, pour AA (4.5:1) ou AAA (7:1).

  5. 5

    Dès que vous changez une couleur, l'URL de la page contient les deux couleurs : vous pouvez la copier pour partager le résultat.

Questions fréquentes

De quel rapport de contraste ai-je besoin ?

WCAG AA demande 4.5:1 pour le texte normal et 3:1 pour le grand texte (24 px et plus, ou 18,66 px en gras) et les composants d'interface comme les icônes et les bordures de champs. AAA demande 7:1 et 4.5:1.

Pourquoi 4.497:1 s'affiche-t-il comme 4.49 et non 4.50 ?

Le rapport n'est jamais arrondi vers le haut au-delà d'un seuil, afin qu'un couple qui rate de justesse 4.5:1 ne paraisse pas réussi.

Puis-je tester un texte semi-transparent ?

Oui. Utilisez le curseur Opacité du texte ; le texte translucide est fusionné sur le fond avant la mesure du rapport.

Qu'est-ce que le nombre APCA ?

L'APCA vient du brouillon WCAG 3 et donne un contraste de clarté (Lc) qui dépend de la couleur utilisée pour le texte ; les valeurs négatives signifient un texte clair sur un fond sombre. C'est encore un brouillon, les rapports WCAG 2 restent donc la cible de conformité habituelle.

Comment les couleurs suggérées sont-elles choisies ?

Seule la clarté est modifiée (en OKLCH), afin que la teinte et le rendu de votre couleur restent les mêmes. Si aucune direction n'atteint la cible, l'outil indique Inatteignable en ne changeant que la clarté ; essayez d'ajuster l'autre couleur.