Vérificateur de contraste
Indiquez une couleur de texte et de fond et découvrez aussitôt le ratio WCAG 2.2 et le résultat AA/AAA.
Cet outil calcule le ratio de contraste entre une couleur de texte et de fond que vous choisissez, selon la formule de luminance relative de WCAG 2.2. Vous pouvez saisir une couleur via le sélecteur, ou en HEX, RGB ou HSL, y compris en HEX abrégé. Le résultat s'affiche avec un aperçu en direct du texte, d'un bouton et d'un lien en taille réelle, pour juger l'apparence et pas seulement un chiffre. Si vous saisissez une couleur transparente (alpha), elle est mélangée avec le fond choisi avant le calcul du ratio.
Le résultat est comparé à quatre seuils : AA 4,5:1 et AAA 7:1 pour le texte normal, AA 3:1 et AAA 4,5:1 pour le grand texte, et 3:1 pour les composants d'interface et les graphiques. Si le ratio ne suffit pas, l'outil propose la couleur valide la plus proche en conservant la même teinte, une suggestion applicable en un clic. En mode palette, saisissez de 2 à 6 couleurs pour voir le ratio de toutes les paires dans un seul tableau.
Cette vérification calcule uniquement un ratio de contraste numérique, elle ne tient pas compte d'autres facteurs de lisibilité comme la police, l'espacement des lettres ou l'encombrement visuel autour du texte, et elle n'analyse pas une page en ligne à votre place. Différents types de daltonisme perçoivent le même ratio différemment, un ratio conforme ne garantit donc pas une lecture confortable pour tous. Une évaluation d'accessibilité complète nécessite aussi des tests avec de vrais utilisateurs ou un lecteur d'écran.
Questions fréquentes
Quelle taille de texte compte comme grand texte ?
Selon WCAG, environ 18 pt (24 px) normal ou 14 pt (18,5 px) gras et au-delà compte comme grand texte ; tout ce qui est plus petit doit respecter les seuils plus stricts du texte normal.
Dois-je viser AA ou AAA ?
AA est le niveau de base attendu sur la plupart des sites ; AAA est un objectif plus strict, recommandé quand l'accessibilité est prioritaire, mais plus difficile à atteindre en gardant les couleurs de marque.
Si le ratio est conforme, mon design est-il totalement accessible ?
Non, le ratio de contraste n'est qu'un facteur parmi d'autres ; police, graisse, espacement et contenu environnant influent aussi sur la lisibilité, un ratio conforme ne remplace donc pas une évaluation d'accessibilité plus complète.
Les couleurs saisies sont-elles conservées quelque part ?
Non, tout est calculé entièrement dans votre navigateur, aucune couleur ni palette ne quitte votre appareil.
