Dans cet article
Qu'est-ce que le contraste des couleurs et pourquoi c'est important
Le contraste des couleurs est la différence de luminance entre deux couleurs, généralement le texte au premier plan et son arrière-plan. Un contraste suffisant garantit que le texte est lisible pour tous, y compris les personnes malvoyantes ou daltoniennes. Un contraste insuffisant rend le contenu difficile, voire impossible à lire, excluant des millions d'utilisateurs.
Les Directives pour l'accessibilité du contenu web (WCAG) définissent des ratios de contraste minimum qui garantissent la lisibilité pour un large éventail de capacités visuelles. Respecter ces normes n'est pas seulement une bonne pratique — c'est une obligation légale dans de nombreuses juridictions en vertu des lois sur l'accessibilité comme l'ADA, l'EAA et l'EN 301 549.
Comment fonctionnent les ratios de contraste WCAG
Le WCAG utilise la luminance relative pour calculer les ratios de contraste entre deux couleurs. La formule produit un ratio de 1:1 (aucun contraste, couleurs identiques) à 21:1 (contraste maximum, noir sur blanc).
- La luminance relative est calculée à partir de valeurs sRGB linéarisées avec la formule : L = 0.2126R + 0.7152G + 0.0722B
- Le ratio de contraste est (L1 + 0.05) / (L2 + 0.05) où L1 est la couleur la plus claire et L2 la plus foncée
- Le texte normal (moins de 18pt ou 14pt gras) nécessite au moins 4.5:1 pour AA et 7:1 pour AAA
Essayez gratuitement — sans inscription
Vérifier le contraste →Comprendre les niveaux de conformité WCAG AA vs AAA
Le WCAG définit deux niveaux de conformité pour le contraste des couleurs. Le niveau AA est la norme minimale requise par la plupart des réglementations d'accessibilité, tandis que le AAA offre une accessibilité améliorée pour les utilisateurs ayant des déficiences visuelles plus sévères.
- AA texte normal — nécessite un ratio de contraste d'au moins 4.5:1 pour le texte inférieur à 18pt (ou 14pt gras)
- AA grand texte — nécessite au moins 3:1 pour le texte de 18pt et plus (ou 14pt gras et plus)
- AAA texte normal — nécessite au moins 7:1 pour le plus haut niveau de lisibilité
- AAA grand texte — nécessite au moins 4.5:1 pour le grand texte au niveau amélioré
- Contraste non textuel — les composants d'interface et objets graphiques nécessitent au moins 3:1 contre les couleurs adjacentes
Conseils pour un design accessible
Concevoir en pensant à l'accessibilité ne signifie pas sacrifier l'esthétique. Ces conseils pratiques vous aident à créer des designs attractifs utilisables par tous.
- Commencez par le contraste — choisissez d'abord vos couleurs de texte et d'arrière-plan, puis construisez votre palette autour
- Ne vous fiez jamais à la couleur seule — utilisez des icônes, des motifs ou des étiquettes en plus de la couleur
- Testez avec du vrai contenu — le texte de remplissage peut sembler correct, mais le contenu réel peut révéler des problèmes
- Considérez le mode sombre séparément — les couleurs qui passent en mode clair peuvent échouer en mode sombre et vice versa
- Utilisez un outil de vérification de contraste — les outils automatisés détectent les problèmes plus rapidement que l'inspection manuelle
Foire aux questions
Quel est le ratio de contraste minimum pour la conformité WCAG ?
Pour le WCAG 2.1 Niveau AA, le texte normal nécessite un ratio de contraste d'au moins 4.5:1, et le grand texte (18pt ou 14pt gras) nécessite au moins 3:1. Le niveau AAA élève ces exigences à 7:1 et 4.5:1 respectivement. La plupart des lois sur l'accessibilité font référence au niveau AA comme norme minimale.
Le contraste des couleurs est-il important pour les images et les icônes ?
Oui. Le critère de succès WCAG 2.1 1.4.11 exige que les composants d'interface et les objets graphiques aient au moins 3:1 de contraste avec les couleurs adjacentes. Cela inclut les icônes, les bordures de champs, les indicateurs de focus et les éléments de graphiques. Les images décoratives sont exemptées.
Comment corriger un faible contraste sans changer mes couleurs de marque ?
Vous pouvez ajuster la luminosité de vos couleurs de marque tout en conservant la même teinte et saturation. Par exemple, assombrissez un bleu clair pour le texte ou éclaircissez un arrière-plan sombre. Une autre approche est d'utiliser vos couleurs de marque pour les grands éléments décoratifs et des neutres à fort contraste pour le corps du texte.