Vérificateur et calculateur de contraste WCAG
Le Vérificateur de contraste des couleurs calcule le ratio d'accessibilité entre une couleur de premier plan et une couleur d'arrière-plan selon les normes W3C. Il mesure le contraste WCAG en temps réel pour évaluer la lisibilité du texte normal et du grand texte. L'analyse s'exécute entièrement dans votre navigateur, sans inscription ni transfert de données vers un serveur.
Calculer le ratio de contraste entre deux couleurs
Pour réaliser un test de contraste de couleur efficace, l'outil met à jour l'aperçu et les statuts de conformité à chaque saisie. Aucune validation manuelle n'est requise.
- Saisissez un code hexadécimal à 3 ou 6 chiffres dans le champ du texte (premier plan) ou du fond (arrière-plan).
- Appuyez sur une pastille de couleur pour ouvrir le sélecteur natif de votre appareil et utiliser la pipette.
- Cliquez sur Inverser les couleurs pour permuter instantanément le texte et le fond.
Par exemple, associer un texte #767676 sur un fond #FFFFFF produit un ratio de 4,54:1. Ce couple obtient le statut Reçu pour les critères AA Normal, AA Grand et AAA Grand.
Exigences de contraste WCAG AA et AAA
Le niveau du contraste WCAG AA constitue le seuil de référence exigé par la majorité des audits d'accessibilité web. Il impose un ratio minimal de 4,5:1 pour le texte normal et de 3,0:1 pour le grand texte.
Le niveau du contraste WCAG AAA applique des critères plus stricts pour renforcer le confort visuel : au moins 7,0:1 pour le texte normal et 4,5:1 pour le grand texte.
Vérifier le contraste de couleur avec des codes HEX
Ce vérificateur de contraste accepte directement les codes issus de vos fichiers CSS ou de vos maquettes Figma. Il prend en charge les formats HEX à 3 ou 6 chiffres (caractères 0–9 et A–F).
Le champ de saisie ignore les caractères superflus ainsi que le symbole # pour éviter toute erreur de collage lors de vos sessions de travail.
Comprendre le ratio de contraste AA et AAA
Comparer le ratio de contraste AA et AAA permet de choisir le bon niveau d'exigence pour vos interfaces. L'outil évalue simultanément les quatre seuils de la norme WCAG 2.1 pour vous éviter des vérifications répétées.
Selon les recommandations de la norme WCAG, la définition du grand texte correspond à un corps d'au moins 18 points (24 px) en graisse normale, ou d'au moins 14 points (18,66 px) en gras.
Un détecteur de contraste rapide pour vos maquettes
Ce détecteur de contraste s'intègre directement dans le flux de conception graphique. Tester la lisibilité dès la phase de création coûte nettement moins cher que de corriger un manque d'accessibilité une fois le site intégré.
Le calcul repose sur la formule W3C de luminance relative sRGB, mesurée sur une échelle de 1:1 à 21:1. Les résultats s'affichent avec une précision décimale conforme aux usages du web en France.
Foire aux questions
Quel est le ratio de contraste minimum pour la norme WCAG AA ?
Le niveau WCAG 2.1 AA exige un ratio de contraste minimal de 4,5:1 pour le texte normal et de 3,0:1 pour le grand texte. Ces seuils garantissent une lisibilité suffisante pour la majorité des utilisateurs.
Quel est un bon ratio de contraste pour le texte ?
Un ratio de 4,5:1 ou plus constitue la base recommandée pour le texte courant en niveau AA. Pour assurer un confort de lecture optimal, notamment en cas de forte luminosité, visiez un ratio de 7,0:1 ou plus, correspondant au niveau AAA.
Quel est le ratio WCAG AA pour du texte normal ?
Le ratio de contraste minimal requis en niveau AA pour du texte normal est de 4,5:1. Le grand texte bénéficie d'un seuil assoupli à 3,0:1 car les caractères plus larges restent lisibles avec moins de contraste.
Ce vérificateur de contraste de couleur est-il gratuit ?
Oui, cet outil est entièrement gratuit, sans création de compte ni limite d'utilisation. Le calcul du ratio s'effectue localement dans votre navigateur sans envoyer vos données à un serveur.
Peut-on vérifier le contraste de couleur avec des codes HEX ?
Oui, vous pouvez saisir un code hexadécimal à 3 ou 6 chiffres dans les champs de premier plan et d'arrière-plan. Les statuts de conformité s'actualisent immédiatement dès que le code saisie est valide.
Quelle est la différence entre le contraste WCAG AA et AAA ?
Le niveau AA exige un ratio de 4,5:1 pour le texte normal et 3,0:1 pour le grand texte. Le niveau AAA est plus strict et requiert 7,0:1 pour le texte normal et 4,5:1 pour le grand texte.
Qu'est-ce qui est considéré comme du grand texte selon la norme WCAG ?
La norme WCAG définit le grand texte comme tout texte d'au moins 18 points (soit 24 pixels) en corps normal, ou d'au moins 14 points (soit 18,66 pixels) lorsqu'il est en gras.
Est-il possible d'inverser les couleurs du texte et du fond en un clic ?
Oui, il suffit de cliquer sur le bouton Inverser les couleurs pour permuter la couleur de premier plan et la couleur d'arrière-plan et recalculer aussitôt le ratio de contraste.
Recommandés
-
Interaction of Color (Josef Albers, en anglais)Le classique sur la façon dont une même couleur change selon le fond qui l'entoure.
-
Don't Make Me Think, Revisited (Steve Krug, en anglais)Des couleurs lisibles, c'est le début ; ce court classique couvre le reste de l'ergonomie web.
-
Capteur de couleur Nix Mini 3Scannez une peinture, un tissu ou un échantillon de marque en code hex, puis testez-le ici.
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
