À propos de cet outil
Ce vérificateur calcule le contraste entre deux couleurs opaques et affiche un aperçu du texte. Il vérifie séparément les seuils AA et AAA pour les textes courants et de grande taille. Ce contrôle des couleurs ne constitue pas une évaluation complète de l'accessibilité du site.
Mode d'emploi
- Saisissez les couleurs du texte et du fond sous forme de codes HEX opaques à 3 ou 6 chiffres.
- Observez la lisibilité du texte sur le fond choisi.
- Consultez le rapport de contraste et les quatre résultats de conformité.
- Ajustez les couleurs, vérifiez à nouveau et copiez les résultats.
Exemples
- #000000 et #ffffff → 21:1.
- Deux couleurs identiques → 1:1.
- #777777 et #ffffff → environ 4,48:1, en dessous du seuil AA de 4,5:1 pour le texte courant.
Principe du calcul
Divisez chaque composante sRGB par 255. Si c ≤ 0.04045, sa valeur linéaire vaut c / 12.92 ; sinon, elle vaut ((c + 0.055) / 1.055)^2.4. La luminance relative L = 0.2126R + 0.7152G + 0.0722B. Le contraste vaut (L la plus élevée + 0.05) / (L la plus faible + 0.05). Les seuils sont comparés au résultat complet ; seul l'affichage est arrondi.
Seuils de contraste du texte selon WCAG 2.x
- AA, texte courant : au moins 4,5:1.
- AA, texte de grande taille : au moins 3:1.
- AAA, texte courant : au moins 7:1.
- AAA, texte de grande taille : au moins 4,5:1.
Un texte de grande taille mesure généralement au moins 18pt (24 pixels CSS), ou 14pt (environ 18,67 pixels CSS) s'il est en gras. Les seuils sont toujours vérifiés à partir du contraste non arrondi.
Utilisations courantes
- Vérifier les couleurs du texte et du fond des boutons.
- Contrôler le contraste des paragraphes et des titres d'un thème.
- Ajuster une maquette selon les seuils de contraste WCAG.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Qu'est-ce que le contraste WCAG ?
Il mesure la différence entre les couleurs du texte et du fond à partir de leur luminance relative. Le rapport va de 1:1 à 21:1.
Que signifie 4,5:1 ?
C'est le contraste minimal du niveau WCAG AA pour le texte courant. Le résultat doit atteindre ou dépasser 4,5 pour être conforme.
Quelle est la différence entre AA et AAA ?
Pour le contraste du texte, AAA est plus exigeant : 7:1 pour le texte courant et 4,5:1 pour le texte de grande taille.
Qu'entend-on par texte de grande taille ?
Généralement, au moins 18pt en graisse normale ou 14pt en gras, soit environ 24px et 18,67px respectivement.
L'outil vérifie-t-il les couleurs transparentes ou les dégradés ?
Il traite uniquement les couleurs unies opaques. Les couleurs transparentes doivent d'abord être composées sur leur fond réel ; pour un dégradé, vérifiez le contraste minimal dans la zone couverte par le texte.