Aller au contenu

Vérificateur de contraste des couleurs

Comparez une couleur de texte à son arrière-plan selon les quatre seuils WCAG 2.2.

Saisissez deux couleurs

Traitement dans le navigateur.

HEX sRGB opaque de 3 ou 6 chiffres, par exemple #111 ou #1A2B3C.

HEX sRGB opaque de 3 ou 6 chiffres, par exemple #FFF ou #F5F5F5.

Résultat du contraste

Saisissez les couleurs HEX du texte et du fond, puis vérifiez.

Comment vérifier le contraste

Utilisez cet outil pour deux couleurs unies réellement adjacentes. Il contrôle le contraste du texte, pas une page entière.

  1. Saisissez la couleur du texte en HEX sur 3 ou 6 chiffres.
  2. Saisissez la couleur unie située derrière le texte.
  3. Choisissez Vérifier le contraste.
  4. Lisez le rapport et chaque résultat écrit.
  5. Testez séparément les autres états réels.

Calcul officiel

Les canaux sRGB sont normalisés et linéarisés au seuil 0,04045. La luminance vaut 0,2126R + 0,7152G + 0,0722B et le rapport (L1 + 0,05) / (L2 + 0,05).

Seuils AA et AAA

AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA demande 7:1 et 4,5:1. Le grand texte commence à 18 pt en graisse normale ou 14 pt en gras, avec un équivalent pour les écritures CJK.

Arrondi et limites

Le calcul complet décide : 4,499:1 échoue à 4,5:1 même si 4,50 est affiché. Seules deux couleurs HEX opaques sont acceptées, sans alpha, dégradé, image ni analyse de site.

Autres vérifications

  • Liens, focus, erreurs et états désactivés.
  • Texte sur image et thèmes alternatifs.
  • Taille, graisse et police réelles.
  • Clavier, zoom, structure et autres exigences.

Exemples

#000000 sur #FFFFFF donne 21,00:1 et réussit les quatre seuils.

#767676 sur blanc dépasse 4,5:1 ; #777777 reste en dessous.

Questions fréquentes

Puis-je omettre # ?

Oui, 3 ou 6 chiffres sont valides avec ou sans #.

Pourquoi pas de transparence ?

La couleur effective dépend de la composition ; cet outil compare deux couleurs opaques.

Réussi signifie-t-il que tout le site est conforme ?

Non, seul ce couple et ces seuils sont vérifiés.

Quel seuil pour un texte de 16 px ?

Le texte normal : au moins 4,5:1 pour AA.