Vérificateur de contraste des couleurs
Calculer le rapport de contraste entre une couleur de texte et une couleur de fond et vérifier les critères WCAG 2.1 AA et AAA, repris par le RGAA.
Essayer un autre outil
Une sélection pour compléter cet outilCe vérificateur calcule le rapport de contraste entre une couleur de texte et une couleur de fond, de 1:1 (aucun contraste) à 21:1 (noir sur blanc), et indique si les seuils des règles d’accessibilité WCAG 2.1 sont respectés : niveau AA et niveau AAA, pour un texte normal et pour un grand texte. Ces seuils sont repris par le RGAA, le référentiel français d’accessibilité des services en ligne. Un aperçu montre le rendu réel, et un bouton inverse les deux couleurs.
Comment utiliser cet outil
- 01Saisir les couleursChoisissez la couleur du texte et celle du fond, ou saisissez leurs codes HEX.
- 02Lire le rapportLe rapport de contraste et les résultats AA et AAA s’affichent aussitôt.
- 03AjusterAssombrissez ou éclaircissez une couleur jusqu’à atteindre le niveau visé.
Dans quels cas est-ce utile ?
- Conception webChoisir des couleurs de texte et de boutons lisibles par tous.
- Audits d’accessibilitéVérifier rapidement un couple de couleurs signalé lors d’un audit RGAA.
- Chartes graphiquesValider les associations de couleurs d’une identité visuelle.
Exemples
- Gris sur blanc#767676 sur blanc donne environ 4,5:1 : c’est la limite du niveau AA pour un texte normal.
- Bleu de lien#3B82F6 sur blanc donne environ 3,7:1 : suffisant pour un grand texte en AA, pas pour un texte normal.
- Noir sur blanc21:1, le contraste maximal, conforme à tous les niveaux.
Conseils pour un meilleur résultat
- Viser l’AA au minimumLe niveau AA est l’objectif courant des sites et des services publics ; l’AAA s’applique surtout aux contenus très lus.
- Les états des boutonsVérifiez aussi les couleurs au survol, désactivées et de focus, souvent oubliées.
- Pas seulement la couleurUne information ne doit pas reposer uniquement sur la couleur : ajoutez un texte ou une icône.
Les seuils WCAG 2.1
Niveau AA : 4,5:1 pour un texte normal, 3:1 pour un grand texte. Niveau AAA : 7:1 et 4,5:1. Un grand texte mesure au moins 18 points (24 px), ou 14 points en gras (environ 19 px).
Le calcul
Le rapport vaut (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont les luminances relatives de la couleur la plus claire et de la plus foncée, calculées à partir des composantes rouge, verte et bleue selon la formule des WCAG.
Le RGAA
Le Référentiel général d’amélioration de l’accessibilité, obligatoire pour les services publics en ligne et certaines grandes entreprises en France, reprend ces seuils dans son critère sur les contrastes.
Questions fréquentes
Quel contraste minimum pour un texte ?
4,5:1 pour un texte normal et 3:1 pour un grand texte, au niveau AA des WCAG 2.1.
Qu’est-ce qu’un grand texte ?
Un texte d’au moins 18 points (24 px), ou de 14 points en gras (environ 19 px).
Quelle différence entre AA et AAA ?
AAA est plus exigeant : 7:1 pour un texte normal au lieu de 4,5:1.
Le RGAA utilise-t-il les mêmes seuils ?
Oui, le référentiel français reprend les seuils de contraste des WCAG.
Le contraste suffit-il pour être accessible ?
Non, c’est un critère parmi d’autres : structure, alternatives textuelles, navigation au clavier comptent aussi.
Mes couleurs sont-elles enregistrées ?
Non. Les couleurs testées restent dans votre navigateur.