Vérificateur de contraste des couleurs
Aperçu
Faites place aux bonnes idées.
Un peu de clarté, ça change tout.
Rassemblez vos idées, organisez les détails et consacrez du temps aux tâches essentielles. Tout ce dont vous avez besoin, au même endroit.
Conçu pour votre quotidien.
Vérifiez le contraste entre le texte et les couleurs de fond
Deux couleurs peuvent paraître attrayantes dans une maquette, mais s'avérer difficiles à lire pour du texte ou des contrôles de petite taille. Saisissez les codes HEX des couleurs de premier plan et d'arrière-plan pour visualiser leur rapport de contraste et évaluer leur performance par rapport aux seuils de lisibilité WCAG 2.x AA et AAA. L'aperçu place ces couleurs dans des contextes courants de texte, de boutons et d'interface, vous permettant ainsi de mieux apprécier leur association.
Que signifient les résultats de contraste des WCAG ?
- Texte normal : au moins 4.5:1 pour AA et 7:1 pour AAA.
- Texte de grande taille : au moins 3:1 pour AA et 4.5:1 pour AAA. Selon les WCAG, le texte de grande taille mesure au moins 24 px en caractères normaux ou environ 18,7 px en gras.
- Composants d’interface et objets graphiques significatifs : un seuil de contraste non textuel de 3:1 peut s’appliquer par rapport aux couleurs adjacentes.
Le résultat utilise le rapport non arrondi, même si la valeur affichée comporte moins de décimales. Une paire de couleurs qui réussit le test ne garantit pas la conformité de l’ensemble d’une page ou d’un composant aux WCAG : les autres combinaisons, états, styles de focus, éléments sémantiques et interactions doivent aussi être vérifiés.
Comment tester une paire de couleurs
- Saisissez les valeurs HEX des couleurs de premier plan et d'arrière-plan ou choisissez des couleurs à l'aide du sélecteur.
- Consultez le rapport de contraste et les résultats pour le texte normal, le texte de grande taille et l'interface utilisateur.
- Inspectez l'aperçu de l'interface en direct. Modifiez une couleur et comparez le résultat avant de l'appliquer à votre conception.
Questions fréquentes
Le ratio 4.5:1 est-il suffisant pour tous les types de texte ?
Il s'agit du contraste minimal WCAG AA pour un texte normal. Le niveau AAA a un seuil cible plus élevé de 7:1 ; les textes de grande taille ont des seuils différents.
Un badge AA signifie-t-il que mon site web est accessible ?
Non. Cet outil vérifie une seule paire de couleurs fournie. L'accessibilité dépend également d'autres paires premier plan/arrière-plan et de nombreux autres critères que le simple contraste.
Puis-je tester la transparence, les dégradés ou une page web entière ?
Non inclus dans cette version. Le vérificateur évalue une paire de couleurs HEX unies à l'aide du calcul de contraste WCAG 2.x ; il ne s'agit pas d'un scanner de pages web ni d'un test APCA/WCAG 3.