Aller au contenu

Vérificateur de contraste

Web et développement

Ce texte est-il lisible sur ce fond ?

Vérifiez le contraste WCAG, les niveaux respectés et trouvez une couleur proche qui les atteint.

Rapport de contraste

4,54:1

4 contrôles réussis sur 5.

Exemple de grand texte

Portez ce vieux whisky au juge blond qui fume.

Contrôles WCAG 2.2

  • Texte normal, niveau AA Conforme

    Critère 1.4.3 : minimum 4,5:1.

  • Grand texte, niveau AA Conforme

    Critère 1.4.3 : minimum 3:1.

  • Texte normal, niveau AAA Problème

    Critère 1.4.6 : minimum 7:1.

  • Grand texte, niveau AAA Conforme

    Critère 1.4.6 : minimum 4,5:1.

  • Icônes et commandes, niveau AA Conforme

    Critère 1.4.11 : minimum 3:1.

Couleur de texte conforme la plus proche

Niveau AAA, texte normal (7:1)
#595959

Liens sponsorisés

Vérifiez le contraste WCAG, les niveaux respectés et trouvez une couleur proche qui les atteint.

Mode d’emploi

  1. Saisissez les couleurs du texte et du fond dans un format CSS, ou utilisez les échantillons. Le bouton d’inversion les échange.
  2. Consultez le rapport et les contrôles : texte normal, grand texte, icônes ou commandes, niveaux AA et AAA.
  3. Si un contrôle échoue, copiez la couleur conforme la plus proche. Elle conserve la teinte et change seulement la clarté.

Texte gris sur fond blanc

Couleur du texte (HEX)Rapport de contraste
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Liens sponsorisés

Comment ça marche

Les WCAG 2.2 évaluent la distinction du texte sur son fond par un rapport de 1:1 (identiques) à 21:1 (noir sur blanc). Le niveau AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte, d’au moins 18 points ou 14 points en gras (critère 1.4.3). Le niveau AAA demande 7:1 et 4,5:1 (1.4.6). Icônes, bordures de champs et éléments nécessaires à la compréhension doivent atteindre 3:1 (1.4.11).

Le rapport vaut (L1 + 0,05) ÷ (L2 + 0,05), avec L1 la luminance relative de la couleur claire et L2 celle de la sombre. La luminance vaut 0,2126 R + 0,7152 G + 0,0722 B sur les composantes linéarisées. #767676 sur blanc donne L = 0,181 face à 1, donc (1 + 0,05) ÷ (0,181 + 0,05) = 4,54:1. Le rapport est tronqué, jamais arrondi vers le haut : 4,499 n’atteint pas 4,5.

Le texte transparent est d’abord composé sur le fond, et le fond transparent sur du blanc. La proposition conserve teinte et chroma et déplace uniquement la clarté OKLCH jusqu’à la valeur conforme la plus proche. Le contraste n’est qu’un facteur de lisibilité : police, taille et graisse comptent aussi. Le rapport ne décrit pas la perception des personnes daltoniennes au-delà de la clarté.

Questions fréquentes

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

Au moins 18 points (24 px), ou 14 points (environ 18,7 px) en gras. Des lettres plus grandes étant plus lisibles, le contraste requis est moindre.

Quel niveau viser ?

AA est l’objectif juridique et de conception habituel. AAA est plus exigeant et pas toujours réalisable sur tout un site, mais utile pour les textes longs.

Le rapport dépend-il de la couleur utilisée pour le texte ?

Non. Inverser les couleurs conserve le rapport. Seuls l’aperçu et la proposition changent, car celle-ci ajuste la couleur du texte.

Réussir ce test rend-il ma page accessible ?

Non. Il vérifie seulement le contraste des couleurs. L’accès au clavier, les alternatives textuelles et les autres exigences restent importants.

Pourquoi un rapport juste inférieur à 4,5 échoue-t-il au niveau AA pour le texte normal ?

Le seuil est 4,5:1, sans arrondi supérieur. L’affichage est tronqué à deux décimales pour ne pas faire paraître conforme une valeur insuffisante.

Pour aller plus loin

Autres outils de la catégorie Web et développement

Les 18 outils de la catégorie Web et développement

Populaires en ce moment

Liens sponsorisés

Liens sponsorisés