Vérificateur de contraste des couleurs

Le vérificateur de contraste des couleurs aide les concepteurs, les développeurs et les professionnels de l'accessibilité à s'assurer que les combinaisons de couleurs respectent les normes d'accessibilité WCAG 2.x. Un contraste approprié entre les couleurs du texte et de l'arrière-plan est essentiel pour la lisibilité, en particulier pour les utilisateurs ayant une vision faible ou des déficiences de la vision des couleurs.

Qu'est-ce que le rapport de contraste des couleurs ?

Le rapport de contraste des couleurs mesure la différence de luminance (luminosité) perçue entre deux couleurs. Il varie de 1:1 (couleurs identiques, aucun contraste) à 21:1 (contraste maximum : noir sur blanc). Le rapport est calculé à l'aide de la formule WCAG 2.x basée sur les valeurs de luminance relative des deux couleurs.

Exigences de contraste WCAG

Les directives d'accessibilité aux contenus web (WCAG) définissent deux niveaux de conformité pour le contraste des couleurs :

Qu'est-ce qui compte comme "texte large" ?

Le WCAG définit le texte large comme étant au moins 18 points (24px) de poids normal, ou au moins 14 points (18,66px) de poids gras. Le texte large a des exigences de contraste moindres car les caractères plus grands sont naturellement plus faciles à lire.

Comment utiliser cet outil

1. Entrez vos couleurs : Choisissez les couleurs de premier plan (texte) et d'arrière-plan à l'aide des sélecteurs de couleurs, tapez des codes hexadécimaux ou cliquez sur un exemple prédéfini.
2. Vérifiez l'aperçu en direct : Voyez instantanément à quoi ressemblent vos couleurs sur des éléments réels de l'interface utilisateur (titres, corps du texte, boutons, liens, champs de formulaire).
3. Cliquez sur "Vérifier le contraste" : Obtenez le rapport de contraste exact et l'état de conformité WCAG pour le texte normal, le texte large et les composants d'interface utilisateur.
4. Appliquez les suggestions : Si vos couleurs échouent, utilisez les suggestions automatiques pour trouver l'alternative accessible la plus proche.

Comprendre les résultats

Rapport de contraste

Le chiffre principal (par exemple, 8,59:1) vous indique à quel point les deux couleurs paraissent différentes. Plus le chiffre est élevé, meilleure est la lisibilité. Un rapport d'au moins 4,5:1 garantit que la plupart des utilisateurs peuvent lire confortablement un texte de taille normale.

Note globale

• AAA (Excellent) : Réussit tous les critères WCAG, y compris le niveau amélioré (7:1+). Meilleure accessibilité possible.
• AA (Bon) : Réussit les exigences standard (4,5:1+). Répond aux exigences légales dans la plupart des juridictions.
• AA Large (Partiel) : Réussit uniquement pour le texte large ou les composants d'interface utilisateur (3:1+). Le texte normal échoue.
• Échec (Médiocre) : Ne répond à aucun critère de contraste WCAG. Le texte sera difficile à lire pour de nombreux utilisateurs.

Suggestions de couleurs

Lorsque vos couleurs ne répondent pas aux exigences de contraste, l'outil suggère la couleur accessible la plus proche en ajustant la luminosité tout en préservant la teinte et la saturation. Vous pouvez appliquer les suggestions d'un simple clic.

Pourquoi le contraste des couleurs est-il important ?

• Conformité légale : De nombreux pays exigent par la loi la conformité au niveau WCAG AA (ADA, Section 508, EN 301 549, EAA).
• Expérience utilisateur : Un bon contraste améliore la lisibilité pour tous les utilisateurs, pas seulement ceux en situation de handicap.
• Impact SEO : Les moteurs de recherche intègrent de plus en plus l'accessibilité dans leurs classements.
• Portée de l'audience : Environ 1 homme sur 12 et 1 femme sur 200 présentent une déficience de la vision des couleurs.

Conseils pour choisir des couleurs accessibles

• Commencez par un contraste suffisant, puis affinez le design — il est plus difficile de corriger le contraste rétroactivement.
• Évitez de placer du texte coloré sur des fonds colorés sans tester. Même des couleurs qui "paraissent différentes" peuvent échouer aux tests de contraste.
• Le texte gris clair sur fond blanc est l'un des échecs d'accessibilité les plus courants.
• Utilisez cet outil pendant la conception, pas seulement lors de l'audit — détecter les problèmes tôt permet d'économiser un travail de correction important.
• Ne vous fiez pas uniquement à la couleur pour transmettre des informations ; utilisez également des formes, des motifs ou des étiquettes.

Foire aux questions

Qu'est-ce que le rapport de contraste des couleurs ?

Le rapport de contraste des couleurs mesure la différence de luminance perçue entre deux couleurs. Il varie de 1:1 (aucun contraste, même couleur) à 21:1 (contraste maximum, noir sur blanc). Le rapport est calculé à l'aide de la formule WCAG 2.x : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre.

Quel rapport de contraste est requis pour la conformité WCAG AA ?

Le WCAG AA exige un rapport de contraste minimal de 4,5:1 pour le texte normal (moins de 18pt ou 14pt gras) et de 3:1 pour le texte large (18pt+ ou 14pt+ gras). Pour les composants d'interface utilisateur non textuels et les objets graphiques, le minimum est de 3:1.

Quelle est la différence entre WCAG AA et AAA ?

WCAG AA est le niveau de conformité standard exigeant 4,5:1 pour le texte normal et 3:1 pour le texte large. WCAG AAA est le niveau amélioré exigeant 7:1 pour le texte normal et 4,5:1 pour le texte large. Le niveau AA est requis par la plupart des lois sur l'accessibilité, tandis que le niveau AAA est recommandé mais généralement pas obligatoire pour l'ensemble des sites web.

Qu'est-ce qui est considéré comme du texte large dans les directives WCAG ?

Dans les directives WCAG, le texte large est défini comme un texte d'au moins 18 points (24px) en gras normal, ou d'au moins 14 points (environ 18,66px) en gras. Le texte large a des exigences de contraste plus faibles car les caractères plus grands sont plus faciles à lire.

How do I fix low color contrast?

Pour corriger un faible contraste de couleurs : (1) Foncez la couleur du texte ou éclaircissez l'arrière-plan, ou vice-versa. (2) Utilisez notre fonction de suggestion de couleurs qui trouve automatiquement la couleur la plus proche qui réussit le test. (3) Augmentez la taille de la police pour qu'elle soit considérée comme du "texte large" ayant des exigences moindres. (4) Évitez d'utiliser uniquement la couleur pour transmettre des informations.

Le contraste des couleurs s'applique-t-il uniquement au texte ?

Non. Le critère de succès WCAG 2.1 1.4.11 exige un rapport de contraste minimal de 3:1 pour les éléments non textuels, y compris les bordures de champ de formulaire, les icônes et les objets graphiques essentiels à la compréhension du contenu. Cela s'applique aux composants d'interface utilisateur tels que les boutons, les champs de formulaire et les indicateurs de focus.

Ressources additionnelles

• WCAG 2.1: Comprendre le contraste (Minimum)
• WCAG 2.1: Comprendre le contraste (Amélioré)
• Web Content Accessibility Guidelines - Wikipédia