Aller au contenu principal
Bethemesh
Web & SEO

Vérificateur de contraste

Comparez une couleur de texte et une couleur d’arrière-plan, calculez leur ratio de contraste et vérifiez rapidement les seuils WCAG AA et AAA.

  • Presse-papiers

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Ce vérificateur calcule le ratio de contraste entre une couleur de texte et une couleur de fond selon la méthode des WCAG, puis indique si la combinaison passe les seuils AA et AAA. Il sert à valider une palette avant de l’intégrer dans une maquette, une feuille de style ou un composant, sans envoyer les couleurs à un serveur.

Chaque couleur hexadécimale est convertie en luminance relative : les trois canaux rouge, vert et bleu sont linéarisés, puis pondérés selon la sensibilité de l’œil (le vert compte pour plus de 70 % de la luminance).

Le ratio divise la luminance la plus claire, augmentée de 0,05, par la plus sombre, augmentée de 0,05. Il va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc) et ne dépend pas de l’ordre des deux couleurs.

Le résultat est comparé à trois seuils : 4,5:1 pour le texte normal en AA, 3:1 pour le grand texte en AA et 7:1 pour le texte normal en AAA. Un aperçu affiche le texte dans les deux couleurs choisies.

Comment utiliser cet outil ?

  1. Choisissez la couleur du texte

    Saisissez ou sélectionnez la couleur utilisée pour les caractères.

  2. Choisissez la couleur du fond

    Indiquez la couleur de l’arrière-plan sur lequel le texte s’affiche.

  3. Lisez le ratio et les niveaux

    Le ratio s’affiche avec le résultat Conforme ou Non conforme pour AA texte normal, AA grand texte et AAA texte normal.

  4. Ajustez jusqu’au niveau visé

    Assombrissez le texte ou éclaircissez le fond par petites touches et revérifiez.

Formule du ratio de contraste WCAG

Le ratio compare la luminance relative des deux couleurs.

Ratio de contraste

Ratio = (L1 + 0,05) ÷ (L2 + 0,05), où L1 est la luminance de la couleur la plus claire

Le 0,05 représente la lumière ambiante réfléchie par l’écran.

Luminance relative

L = 0,2126 × R + 0,7152 × V + 0,0722 × B, avec des canaux linéarisés entre 0 et 1

Un canal c (valeur sur 255 divisée par 255) vaut c ÷ 12,92 s’il est inférieur ou égal à 0,03928, sinon ((c + 0,055) ÷ 1,055)^2,4.

L_1
Luminance de la couleur la plus claire
L_2
Luminance de la couleur la plus sombre
R_s, G_s, B_s
Canaux rouge, vert et bleu linéarisés

Cas d'utilisation

Valider une charte graphique

Vérifier qu’une couleur de marque reste lisible en texte sur fond blanc ou sur fond sombre avant de la décliner dans tout un site.

Corriger un audit d’accessibilité

Trouver la nuance la plus proche qui atteint 4,5:1 quand un audit signale un texte gris trop clair.

Choisir la couleur d’un bouton

Comparer le libellé d’un bouton avec sa couleur de fond, puis tester les états survol et désactivé.

Exemples

Gris #777777 sur fond blanc

Ce gris très répandu manque le seuil AA de peu : il convient pour un titre en grand texte, pas pour un paragraphe.

Entrée

Couleur du texte : #777777 · Couleur du fond : #ffffff

Résultat

Ratio de contraste : 4.48:1 · AA texte normal : Non conforme · AA grand texte : Conforme · AAA texte normal : Non conforme

Gris #595959 sur fond blanc

Un gris plus soutenu atteint exactement le seuil AAA de 7:1 tout en restant moins dur qu’un noir pur.

Entrée

Couleur du texte : #595959 · Couleur du fond : #ffffff

Résultat

Ratio de contraste : 7.00:1 · AA texte normal : Conforme · AA grand texte : Conforme · AAA texte normal : Conforme

Conseils et bonnes pratiques

  • Le grand texte correspond à 24 px (18 pt) en normal ou 18,66 px (14 pt) en gras : en dessous, visez 4,5:1.
  • Testez aussi les textes sur image ou dégradé en prenant la zone la plus défavorable du fond.
  • Les icônes et bordures de champs suivent un autre critère WCAG (1.4.11) qui demande 3:1 face aux couleurs voisines.
  • Un ratio conforme ne règle pas tout : un texte trop fin ou trop petit peut rester difficile à lire.

Sources et références

Questions fréquentes

Qu’est-ce qu’un ratio de contraste ?

C’est le rapport entre la luminance de la couleur la plus claire et celle de la plus sombre, chacune augmentée de 0,05. Il va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur du blanc.

Quels seuils faut-il atteindre ?

Pour le niveau AA, 4,5:1 pour le texte normal et 3:1 pour le grand texte. Pour le niveau AAA, 7:1 pour le texte normal. Le niveau AA est celui exigé par la plupart des réglementations, dont la norme européenne EN 301 549.

Pourquoi #777777 sur blanc est-il refusé ?

Son ratio est de 4.48:1, juste sous 4,5:1. L’outil ne fait pas d’arrondi favorable : à 4,48, le texte normal n’atteint pas le niveau AA.

L’ordre des deux couleurs change-t-il le résultat ?

Non. La formule place toujours la couleur la plus claire au numérateur : texte blanc sur fond bleu ou texte bleu sur fond blanc donnent le même ratio.

La transparence est-elle prise en compte ?

Non. L’outil compare deux couleurs opaques. Pour une couleur semi-transparente, calculez d’abord la couleur obtenue une fois posée sur le fond, puis vérifiez cette couleur.

Les couleurs sont-elles envoyées quelque part ?

Non. Le calcul est fait dans votre navigateur et les couleurs ne quittent pas votre appareil.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Encoder et décoder une URL

Encodez ou décodez une URL, ses paramètres et les caractères spéciaux qu’elle contient.

Web & SEOUtiliser l’outil

Générateur de slug

Transformez un titre ou une phrase en slug propre et utilisable dans une URL.

Web & SEOUtiliser l’outil

Validateur d’URL

Validez, normalisez et inspectez des adresses web localement.

Web & SEOUtiliser l’outil

À lire aussi

TutorielBonnes pratiquesDébutant

Optimiser ses images pour le Web sans perdre en qualité

Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.

30 août 20265 min