Vérificateur de contraste WCAG
Ce calculateur mesure le ratio de contraste WCAG et RGAA entre la couleur du texte et la couleur d'arrière-plan. Saisissez un code hexadécimal ou sélectionnez une teinte avec la pipette pour évaluer instantanément la conformité aux niveaux AA et AAA pour le texte courant et le grand texte. Le traitement s'effectue intégralement dans votre navigateur, sans envoi de données vers un serveur externe.
Comment vérifier le contraste des couleurs
L'évaluation de l'accessibilité visuelle d'un design s'effectue en quelques étapes simples grâce aux champs de saisie et au sélecteur de couleur :
- Indiquez la couleur du texte (couleur de premier plan) en saisissant son code hexadécimal ou en cliquant sur la pastille pour ouvrir la pipette.
- Renseignez la couleur de fond (couleur d'arrière-plan) selon la même méthode.
- Consultez directement le rapport de contraste calculé ainsi que la validation des 4 badges de conformité WCAG / RGAA.
- Utilisez le bouton permettant d'inverser les couleurs si vous souhaitez tester la combinaison inverse.
Comprendre le ratio de contraste WCAG, AA et AAA
Les règles d'accessibilité du W3C (WCAG 2.1) et le RGAA 4.1.2 (critère 3.2, aligné sur la norme européenne EN 301 549) définissent des exigences précises selon la taille du texte :
- Niveau AA (seuil légal) : exige un ratio minimal de 4,5:1 pour le texte normal et de 3,0:1 pour le grand texte.
- Niveau AAA (exigence renforcée) : exige un ratio de 7,0:1 pour le texte normal et de 4,5:1 pour le grand texte.
Un grand texte (ou texte agrandi) correspond à une taille d'au moins 18 pt (24 px) en corps normal, ou d'au moins 14 pt (environ 18,5 px à 19 px) pour un texte en gras.
Test de contraste de couleur avec codes hexadécimaux
Chaque champ accepte directement un code hexadécimal composé de 3 ou 6 caractères (chiffres de 0 à 9 et lettres de A à F). Le calcul ignore automatiquement le symbole # ou les espaces superflus lors du collage depuis un outil de conception ou un fichier CSS.
Les quatre badges de conformité s'actualisent instantanément à chaque modification. Vous n'avez aucun formulaire à valider ni aucun bouton de soumission à appuyer.
Effectuer un test d'accessibilité des couleurs
Un rapport de contraste insuffisant constitue l'un des défauts d'accessibilité les plus fréquents sur le web. Un texte qui ne respecte pas le niveau AA s'avère difficile à lire pour les personnes malvoyantes, daltoniennes ou simplement pour un utilisateur consultant son écran en plein soleil.
Vérifier la lisibilité dès la phase de conception évite des corrections coûteuses lors des audits de conformité RGAA.
Calculer le ratio de contraste entre texte et fond
Le calcul s'appuie sur la formule officielle de luminance relative du W3C : (L1 + 0,05) / (L2 + 0,05). Le résultat s'échelonne de 1:1 (aucun contraste, texte et fond identiques) jusqu'à 21:1 (noir et blanc purs).
En exécutant ce calcul en local dans le navigateur, l'outil garantit une réactivité immédiate et une confidentialité totale de vos palettes de couleurs.
Foire aux questions
Quel est le ratio de contraste minimum requis pour le niveau WCAG AA ?
Le niveau WCAG 2.1 AA exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et de 3,0:1 pour le grand texte. Ces mêmes seuils sont appliqués par le RGAA pour les audits d'accessibilité en France.
Quel est le rapport de contraste exigé par le RGAA pour un site web ?
Le RGAA 4.1.2 reprend exactement les critères du niveau AA des WCAG 2.1. Le rapport de contraste doit être d'au moins 4,5:1 pour le texte courant et d'au moins 3,0:1 pour le grand texte.
Quelle est la différence entre les niveaux de conformité WCAG AA et AAA ?
Le niveau AA correspond au standard légal obligatoire pour la plupart des sites publics et grandes entreprises. Le niveau AAA est plus strict et demande un ratio de 7,0:1 pour le texte normal et 4,5:1 pour le grand texte afin de garantir une lisibilité maximale.
Qu'est-ce qu'un « grand texte » selon les normes WCAG et RGAA ?
Un grand texte est un texte d'au moins 18 pt (24 px) en graisse normale, ou d'au moins 14 pt (environ 18,5 px ou 19 px) lorsqu'il est mis en gras.
Comment vérifier le contraste des couleurs à partir d'un code hexadécimal ?
Il suffit de saisir ou coller le code hexadécimal de votre texte et celui de votre arrière-plan dans les champs prévus. Le ratio et les badges de validation s'affichent automatiquement sans rechargement de page.
Cet outil de vérification du contraste des couleurs est-il gratuit et confidentiel ?
Oui, ce détecteur de contraste est totalement gratuit, sans inscription ni publicité. L'ensemble des calculs s'effectue dans votre navigateur sans qu'aucune donnée ne soit transmise à un serveur.
Peut-on utiliser le sélecteur de couleur au lieu de taper un code hex ?
Oui, vous pouvez cliquer sur la pastille de couleur pour ouvrir le sélecteur visuel (pipette) de votre système. Le code hexadécimal et le rapport de contraste se mettent à jour instantanément.
