Vérificateur de contraste

Votre taille de texte

Le seuil dépend de la taille et de la graisse. Réglez les vôtres pour savoir lequel s’applique.

Vision des couleurs

Le ratio WCAG mesure la luminosité. Il ne dit pas si deux teintes restent différentes pour tout le monde. Voici une simulation de votre paire.

Recommandations

Ce que demandent les WCAG 2.2 et le RGAA, et ce qu’un ratio seul ne vérifie pas.

• WCAG 1.4.3 · AA

  Texte : 4,5:1, ou 3:1 pour les grands textes

  Le minimum à viser. Un texte est grand à partir de 24 px, ou de 18,5 px en gras. Lire le critère 1.4.3 (en anglais)

• WCAG 1.4.6 · AAA

  Texte renforcé : 7:1, ou 4,5:1 pour les grands textes

  Un vrai confort pour les longs textes et les personnes malvoyantes. Le W3C déconseille toutefois d’exiger le niveau AAA sur tout un site. Lire le critère 1.4.6 (en anglais)

• WCAG 1.4.11 · AA

  Interface et graphiques : 3:1

  Bordures de champ, icônes, indicateur de focus et courbes doivent se détacher des couleurs voisines, dans tous leurs états. Lire le critère 1.4.11 (en anglais)

• WCAG 1.4.1 · A

  Jamais la couleur seule

  Un lien, une erreur ou une courbe doivent aussi se repérer par un soulignement, une icône ou un texte. Lire le critère 1.4.1 (en anglais)

• RGAA 3.1, 3.2, 3.3

  En France, le RGAA reprend ces seuils

  Critère 3.2 pour le texte (4,5:1 ou 3:1), 3.3 pour les composants et les graphiques (3:1), 3.1 pour l’information donnée par la couleur seule. Lire les critères du RGAA

• Exceptions

  Ce qui échappe aux seuils

  Les logos, le texte purement décoratif et les composants désactivés n’ont pas d’exigence de contraste.

• Arrondi

  4,499:1 n’atteint pas 4,5:1

  Les seuils se lisent sans arrondi. Cet outil tronque donc le ratio au centième, pour ne jamais afficher un seuil atteint à tort.

• À vérifier aussi

  Ce que deux couleurs ne disent pas

  Testez le survol, le focus, le texte indicatif des champs et le mode sombre. Sur une image ou un dégradé, mesurez la zone la moins favorable. Une police très fine paraît plus pâle que sa couleur : choisissez une graisse plus forte.

• Astuce

  Le noir ou le blanc passe toujours

  Quel que soit le fond, un texte noir ou un texte blanc atteint au moins 4,58:1, donc le niveau AA.

• Calcul
  Comment le ratio est calculé

  Chaque composante sRGB est linéarisée, puis la luminance relative vaut L = 0,2126 R + 0,7152 G + 0,0722 B. Le ratio vaut (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus forte. Il va de 1:1 à 21:1. Un texte semi-transparent est d’abord fusionné avec le fond.

  Pour votre paire :