Aller au contenu
ToolMug

Utilisez ↑ ↓ pour naviguer, Entrée pour ouvrir, Échap pour fermer.

Vérificateur de contraste des couleurs

Indiquez une couleur de texte et une couleur de fond pour obtenir le rapport de contraste WCAG et voir si le texte normal et le grand texte respectent les niveaux AA et AAA. En cas d'échec, l'outil conserve la teinte, n'ajuste que la luminosité et suggère la couleur conforme la plus proche, applicable en un clic.

Fonctionne dans votre navigateur — rien de ce que vous saisissez n’est envoyé

Rapport de contraste

4,54:1

  • AA texte normal ≥ 4.5:1Conforme
  • AA texte large ≥ 3:1Conforme
  • AAA texte normal ≥ 7:1Non conforme
  • AAA texte large ≥ 4.5:1Conforme

Grand texte de titre

Le texte de corps normal à 16 px doit être facile à lire.

Petit texte, légendes et notes de bas de page.

Bouton

Couleur de texte la plus proche conforme à AAA : #595959 (7.00:1)

Mode d’emploi

  1. Choisissez les couleurs ou tapez-les — hexadécimal, rgb(), hsl(), oklch() ou un nom de couleur.
  2. Lisez le rapport et les quatre résultats WCAG, et vérifiez l'aperçu en direct ci-dessous.
  3. En cas d'échec, cliquez sur Utiliser cette couleur près d'une suggestion pour l'appliquer.

Explication des options

AA
Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt / 24 px, ou 14 pt / environ 18,7 px en gras). La plupart des réglementations et des systèmes de conception exigent le niveau AA.
AAA
Au moins 7:1 pour le texte normal et 4,5:1 pour le grand texte, pour les contenus où la lisibilité compte le plus.
Couleur suggérée
Conserve la teinte et la saturation dans l'espace colorimétrique OKLCH et ne change que la luminosité pour trouver la couleur la plus proche qui passe juste le seuil.
Couleurs transparentes
Une couleur de texte avec transparence est mesurée telle qu'elle apparaît sur le fond.

Comment le rapport est calculé

Chaque couleur est convertie de sRGB en lumière linéaire, puis en luminance relative :

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Le vert compte le plus parce que l’œil y est le plus sensible. Quelques résultats sur fond blanc :

Couleur du texte Rapport Résultat
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA pour le texte normal, pas AAA pour le texte normal
#767676 4,54 : 1 AA pour le texte normal
#777777 4,48 : 1 Échoue à AA pour le texte normal, réussit pour le grand texte

Les définitions WCAG se trouvent dans Understanding Success Criterion 1.4.3.

Questions fréquentes

Comment le contraste est-il calculé ?

Avec la formule WCAG 2.x (luminosité relative claire + 0,05) ÷ (luminosité relative sombre + 0,05), donnant un rapport de 1:1 à 21:1. Noir sur blanc donne 21:1.

Pourquoi #767676 est-il si souvent mentionné ?

C'est le gris le plus clair qui atteint 4,5:1 (environ 4,54:1) sur fond blanc, une limite basse courante pour le texte secondaire.

Les icônes et les bordures doivent-elles aussi être vérifiées ?

Oui. Depuis WCAG 2.1, les composants d'interface et les graphiques — bordures de boutons, champs de saisie, icônes — nécessitent au moins 3:1 par rapport aux couleurs adjacentes.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.

Outils similaires