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.

Rapport de contraste
21:1
Note
Excellent (AAA)

Texte normal

WCAG AA (4.5:1)
PASS
WCAG AAA (7.0:1)
PASS

Grand texte (18pt+)

WCAG AA (3.0:1)
PASS
WCAG AAA (4.5:1)
PASS

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.

Accessibilité (a11y)

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

1

Couleurs

Saisissez les couleurs d'arrière-plan et de premier plan.

2

Vérifiez

Voyez si le rapport de contraste respecte les niveaux WCAG AA et AAA.

3

Ajustez

Modifiez les couleurs pour améliorer la lisibilité.

Exemple d'utilisation

Vérifie la qualité de la saisie et signale des constats exploitables.

Entrée
Sample text or URL to validate
Sortie
Validation report with issues

Questions fréquentes

Quel est un bon rapport de contraste ?
Le niveau WCAG AA exige 4,5:1 pour le texte normal. Le niveau AAA exige 7:1.
Pourquoi le contraste est-il important ?
Un bon contraste garantit que le texte reste lisible pour les personnes ayant une déficience visuelle.

Outils associés

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.

Cité par

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge