Vérifiez la conformité de contraste WCAG 2.1 entre texte et arrière-plan.
Rapport de contraste
12.3:1
WCAG 2.1 AA
WCAG 2.1 AAA
Ceci est un exemple de texte pour tester la lisibilité des couleurs. Un bon contraste aide tout le monde à lire facilement le contenu web.
Ajustement automatique de la couleur du texte en un clic pour respecter le niveau AA (4.5:1)
Vérifiez la conformité de contraste WCAG 2.1 entre texte et arrière-plan. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Ce vérificateur de contraste calcule le rapport entre la couleur du texte et celle du fond selon la formule WCAG 2.1 : chaque couleur RVB est convertie en luminance relative, puis (plus claire + 0,05) ÷ (plus foncée + 0,05) donne une valeur de 1:1 à 21:1. Le noir sur blanc atteint le maximum de 21:1, deux couleurs identiques donnent 1:1. Choisissez les couleurs avec le sélecteur ou saisissez un code HEX ; l’aperçu du texte et du bouton se met à jour instantanément.
Le niveau AA des WCAG exige au moins 4,5:1 pour le texte normal et le niveau AAA 7:1 ; pour le grand texte (18 pt, ou 14 pt en gras), les seuils passent à 3:1 et 4,5:1. Les badges AA et AAA de l’outil utilisent les seuils du texte normal. Le rapport ne s’arrondit pas : #777777 sur blanc donne 4,47:1, ce qui semble suffire mais échoue, alors que #767676 atteint 4,54:1 et valide AA. #595959 sur blanc atteint environ 7,00:1, assez pour AAA.
Si une combinaison échoue, utilisez la correction intelligente : l’outil conserve la direction de la teinte et éclaircit le texte (sur fond sombre) ou l’assombrit (sur fond clair) par petites étapes jusqu’à 4,5:1 ; à défaut, il passe au noir ou au blanc pur. C’est un raccourci pour trouver une couleur utilisable, mais les couleurs de marque méritent encore un ajustement par un designer.
Le simulateur de daltonisme permet d’importer une image ou d’utiliser l’exemple pour la voir comme une personne atteinte de protanopie, deutéranopie, tritanopie ou achromatopsie, grâce à des matrices de couleurs. Il aide à vérifier que graphiques, cartes ou couleurs d’état ne reposent pas uniquement sur la teinte. Les images sont réduites pour tenir dans 800×600 et traitées dans un canvas du navigateur, sans envoi. La simulation reste approximative ; la vision des couleurs varie d’une personne à l’autre.
Le texte normal demande au moins 4,5:1 pour WCAG AA et 7:1 pour AAA. Le grand texte (18 pt ou 14 pt en gras) demande 3:1 pour AA et 4,5:1 pour AAA. Les éléments non textuels comme les icônes ou les bordures de champs nécessitent au moins 3:1 selon WCAG 2.1.
Les seuils WCAG sont des minimums stricts qu’on ne peut pas arrondir. L’outil affiche deux décimales arrondies vers le bas, pour ne jamais montrer une valeur qui ressemble à 4,5:1 tout en échouant.
Elle ne change que la luminosité de la couleur du texte ; le fond reste identique. Le résultat garde une teinte proche, ou devient noir ou blanc si rien d’autre ne passe. Pour préserver la couleur de marque, ajustez plutôt le fond ou réservez la couleur d’origine aux grands textes et aux éléments décoratifs.
Non. Le navigateur lit l’image et applique la matrice de couleurs dans un canvas : tout reste sur votre appareil. Les filtres sont des approximations courantes, utiles pour repérer les designs qui transmettent une information uniquement par la couleur.
Voir cette catégorie: Design & Couleurs
Simulez des corps rigides, la gravité et des collisions avec un moteur physique 2D interactif.
Placez des points d'ancrage, faites glisser les poignées de Bézier sur un canevas 500×500 et obtenez aussitôt l'attribut d du tracé SVG et une règle CSS clip-path: path().
Transformez vos captures d'écran en maquettes de navigateur professionnelles.
Créez des effets de texte néon lumineux personnalisés et copiez les styles CSS.
