Vérificateur de contraste des couleurs
Vérifiez les rapports de contraste entre le texte et l'arrière-plan. Assurez-vous que votre design respecte les normes d'accessibilité WCAG.
Aperçu d'accessibilité
Voici le rendu de votre texte sur l'arrière-plan.
Texte normal
Grand texte (18pt+)
Noter Vérificateur de contraste des couleurs
Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.
Des designs accessibles
Ne devinez pas si votre texte est lisible. Utilisez notre vérificateur de contraste pour contrôler la conformité de vos combinaisons de couleurs et concevoir des sites web inclusifs.
Comment fonctionne Vérificateur de contraste des couleurs
Cet outil de conformité en accessibilité évalue les rapports de contraste entre la couleur du texte et celle de l'arrière-plan, afin de déterminer si les combinaisons respectent les normes WCAG (Web Content Accessibility Guidelines) de lisibilité pour les personnes ayant une déficience visuelle. Le vérificateur calcule la luminance relative de chaque couleur, applique la formule du rapport de contraste WCAG : (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire et L2 la plus sombre, puis compare les résultats aux seuils minimaux : 4,5:1 pour la conformité AA du texte normal, 7:1 pour la conformité AAA, et des exigences réduites pour le grand texte de plus de 18pt, ou de 14pt en gras.
Le calcul de la luminance convertit les valeurs RVB par correction gamma et somme pondérée des canaux, reflétant la sensibilité de l'œil humain, où le vert contribue le plus à la luminosité perçue : L = 0.2126×R + 0.7152×G + 0.0722×B, les valeurs RVB étant d'abord linéarisées à partir de la représentation sRGB encodée en gamma. Cette rigueur mathématique garantit une mesure d'accessibilité objective, conforme à la manière dont les personnes malvoyantes perçoivent le contraste, notamment en cas de basse vision, de cataracte ou de perte de sensibilité au contraste liée à l'âge.
L'interface accepte les couleurs sous forme de codes hexadécimaux, de valeurs RVB ou via un sélecteur de couleurs, calcule immédiatement les rapports de contraste et affiche des indicateurs de réussite ou d'échec pour chaque niveau WCAG (A, AA, AAA), pour le texte normal comme pour le grand texte. Des aperçus visuels affichent un exemple de texte dans les combinaisons de premier plan et d'arrière-plan, ce qui permet une vérification subjective en complément de la conformité chiffrée. En cas d'échec, des recommandations proposent d'autres couleurs qui respectent l'intention esthétique tout en améliorant les rapports. Les usages courants comprennent l'audit d'accessibilité d'un site avant son lancement, la vérification de supports marketing pour l'inclusivité, la validation de bibliothèques de composants d'interface selon les normes d'accessibilité, ou la conception de présentations lisibles à la projection. Des fonctions avancées permettent de vérifier par lot des palettes entières face à plusieurs arrière-plans, de générer des variantes de couleurs accessibles ou d'exporter des rapports de conformité qui documentent la diligence en matière d'accessibilité. Tous les calculs s'exécutent côté client, ce qui préserve la confidentialité des couleurs de marque en cours de création.
Comment utiliser Vérificateur de contraste des couleurs
Couleurs
Saisissez les couleurs d'arrière-plan et de premier plan.
Vérifiez
Voyez si le rapport de contraste respecte les niveaux WCAG AA et AAA.
Ajustez
Modifiez les couleurs pour améliorer la lisibilité.
Exemple d'utilisation
Vérifie la qualité de la saisie et signale des constats exploitables.
Questions fréquentes
Quel est un bon rapport de contraste ?
Pourquoi le contraste est-il important ?
Outils associés
Générateur de palette de couleurs IA
Générez des palettes de couleurs à partir d'une ambiance, d'une marque ou d'un thème grâce à l'IA. Passez du mode aléatoire instantané au mode IA, puis copiez les codes HEX.
Décalage de teinte
Décalez la teinte d'une couleur ou d'une image sur le cercle chromatique. Copiez les valeurs HEX, RVB ou TSL, ou téléchargez le résultat.
Éclaircisseur de couleur
Éclaircissez n'importe quelle couleur HEX d'un pourcentage donné. Obtenez des nuances plus claires pour le design d'interface.
Assombrisseur de couleur
Assombrissez n'importe quelle couleur HEX d'un pourcentage précis. Obtenez des nuances plus foncées pour les ombres et la profondeur.
Mélangeur de couleurs
Mélangez deux couleurs de façon réglable. Créez des transitions fluides et des nuances intermédiaires.
Convertisseur Pantone en HEX
Convertissez les couleurs du Pantone Matching System (PMS) en codes HEX.
Commentaires
Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.
Vérificateur de contraste des couleurs est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.

