Guide du Vérificateur de Contraste WCAG : Exigences AA/AAA et Comment Corriger les Échecs

Symbole d'accessibilité sur un clavier

Le contraste des couleurs est l'échec d'accessibilité le plus courant sur le web. Selon l'analyse annuelle d'accessibilité de WebAIM, un faible contraste affecte plus de 80% des pages d'accueil. Pourtant, c'est aussi l'un des problèmes les plus faciles à corriger — si vous connaissez les règles et disposez des bons outils. Ce guide explique les exigences de contraste WCAG, le fonctionnement des ratios de contraste et comment corriger les échecs sans repenser toute votre palette.

Qu'est-ce que le contraste des couleurs et pourquoi est-ce important ?

Le contraste des couleurs est la différence de luminance (luminosité perçue) entre le texte et son arrière-plan. Un contraste élevé rend le texte lisible pour tous — y compris les utilisateurs malvoyants, daltoniens, ou ceux qui consultent leur écran en plein soleil.

Les Règles pour l'Accessibilité des Contenus Web (WCAG) 2.1 définissent des ratios de contraste minimums pour garantir la lisibilité. Respecter ces normes n'est pas qu'une bonne pratique — c'est légalement obligatoire selon l'ADA, la Section 508 et des lois similaires dans le monde.

Exigences de contraste WCAG

WCAG définit deux niveaux de conformité pour le contraste :

Niveau AA (norme minimale)

Texte normal (moins de 18pt ou moins de 14pt gras) : Ratio minimum 4.5:1

Texte grand (18pt+ ou 14pt+ gras) : Ratio minimum 3:1

Composants UI et objets graphiques : Ratio minimum 3:1 (ajout WCAG 2.1)

Niveau AAA (norme améliorée)

Texte normal : 7:1 minimum

Texte grand : 4.5:1 minimum

La plupart des organisations visent le Niveau AA comme base. Le niveau AAA est recommandé pour les applications riches en texte et les produits servant les utilisateurs malvoyants.

Comment les ratios de contraste sont calculés

Le ratio de contraste est la luminance relative de la couleur la plus claire divisée par la luminance de la couleur la plus foncée, exprimée comme un ratio de 1:1 (aucun contraste) à 21:1 (noir sur blanc).

Vous n'avez pas besoin de calculer cela à la main. Utilisez notre Vérificateur de Contraste WCAG pour tester plusieurs paires de couleurs instantanément.

Exemples

Texte	Fond	Ratio	AA Normal	AA Grand	AAA Normal
`#000000`	`#FFFFFF`	21:1	✅ Passe	✅ Passe	✅ Passe
`#767676`	`#FFFFFF`	4.54:1	✅ Passe	✅ Passe	❌ Échoue
`#3B82F6`	`#FFFFFF`	3.15:1	❌ Échoue	✅ Passe	❌ Échoue
`#1E40AF`	`#FFFFFF`	7.04:1	✅ Passe	✅ Passe	✅ Passe