Contrôle du contraste des couleurs
Assurez-vous que votre texte et les boutons sont lisibles pour tout le monde — Fixez les couleurs qui échouent.
- Vos données ne quittent jamais votre appareil
- 100 % gratuit
- Sans inscription
- Fonctionne hors ligne après la première charge
Comment vérifier le contraste des couleurs
- Cliquez sur Texte ou Arrière-plan et choisissez ou collez une couleur.
- Lire le rapport, les AA / Résultats AAA et APCA, et voir l'aperçu en direct.
- Appliquez un correctif suggéré ou vérifiez toute une palette dans la grille.
À propos : Vérificateur de contraste
Vérifiez le texte et les couleurs d'arrière-plan par rapport aux WCAG 2.2 AA et AAA et à la nouvelle APCA.
Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.
Idéal pour
- Sites Web et applications accessibles (WCAG) / ADA / EN 301 549)
- Couleurs de marque pour les boutons et les liens
- Couleurs de mode sombre et de visualisation des données
Conseil : Définissez l'aperçu à votre taille et poids réels de police — Un texte volumineux ou en gras nécessite moins de contraste.
Questions fréquentes
De quel rapport de contraste ai-je besoin ?
WCAG 2.2 niveau AA a besoin de 4.5:1 pour le texte normal et 3:1 pour le grand texte (24 px, ou 18.66 px gras) et pour les parties de l'interface utilisateur comme les bordures et les icônes. Le niveau AAA nécessite 7:1 et 4.5:1.
Qu’est-ce que l’APCA ?
L'algorithme de contraste perceptif accessible proposé pour WCAG 3 donne une valeur Lc qui rend compte de la taille de la police et du mode sombre mieux que le rapport 2.x. Lc 75+ convient au corps du texte, 60+ au texte du contenu, 45+ titres.
Mes couleurs échouent — Et maintenant ?
Utilisez « Fix it » : il trouve le texte ou la couleur d’arrière-plan le plus proche (même teinte, légèreté ajustée) qui passe AA ou AAA. Cliquez dessus pour l’appliquer.
Puis-je vérifier toute une palette ?
Oui — Passez à «Palette grid», listez vos couleurs et voyez chaque combinaison texte/arrière-plan avec son ratio et sa note.
Le contraste est-il important pour les icônes et les boutons?
Oui. WCAG demande au moins 3:1 pour les parties d'interface utilisateur et les graphiques significatifs, tels que les icônes, les bordures de saisie et les contours de mise au point.