Vérificateur de Contraste WCAG

Ce que signifient les normes de contraste WCAG

Les Règles pour l'accessibilité des contenus Web (WCAG) fixent des rapports de contraste minimaux pour que le texte reste lisible par les personnes ayant une déficience visuelle. Ces normes ne sont pas arbitraires : environ 1 homme sur 12 et 1 femme sur 200 ont une forme de daltonisme. Et bien d'autres personnes souffrent de malvoyance, ce qui rend un texte peu contrasté franchement difficile à déchiffrer.

Comprendre les rapports de contraste

Le rapport de contraste compare la luminosité relative de deux couleurs. L'échelle va de 1:1 (aucun contraste, même couleur) à 21:1 (contraste maximal, noir pur sur blanc pur). Plus le chiffre est élevé, plus le texte est facile à lire.

Les niveaux WCAG expliqués

Niveau AA (la norme courante)

C'est ce que la plupart des sites doivent respecter. Les exigences :

• Texte normal : rapport minimal de 4,5:1
• Grand texte (18 pt et plus, ou 14 pt et plus en gras) : rapport minimal de 3:1

Niveau AAA (le niveau renforcé)

Des exigences plus strictes pour une accessibilité maximale :

• Texte normal : rapport minimal de 7:1
• Grand texte : rapport minimal de 4,5:1

Les erreurs fréquentes que cet outil détecte

Texte gris clair sur fond blanc

Les designers adorent le gris doux pour son côté épuré, mais #999999 sur blanc ne passe pas le niveau AA. Il faut au minimum du #767676 sur blanc pour valider. Pour le corps de texte, plus le gris est foncé, mieux c'est.

Les couleurs de marque qui ne fonctionnent pas

Le jaune vif ou le vert pastel de votre identité visuelle peuvent être superbes dans un logo, mais devenir parfaitement illisibles en texte sur fond blanc. C'est l'un des problèmes les plus courants, et souvent le dernier à être signalé.

Texte sur photo

Le texte blanc sur une image manque souvent de contraste dans les zones claires. Cet outil vous aide à choisir une couleur d'incrustation qui maintient la lisibilité partout dans la photo.

Texte d'espace réservé dans les formulaires

Les placeholders sont souvent d'un gris très pâle. On débat encore pour savoir si le WCAG s'applique strictement aux placeholders — mais les rendre lisibles reste une bonne pratique de conception.

Comment corriger des couleurs non conformes

Si votre combinaison échoue, voici les ajustements les plus efficaces :

• Assombrissez les couleurs claires — quelques degrés de luminosité suffisent parfois
• Éclaircissez le fond — même principe dans l'autre sens
• Augmentez la taille de police — le grand texte a des seuils moins élevés
• Ajoutez une surcouche de contraste — pour du texte sur photo, un fond semi-transparent fait des miracles

Obligations légales

Plusieurs pays imposent la conformité WCAG :

• États-Unis — l'ADA et la Section 508 font explicitement référence au WCAG
• UE — la norme EN 301 549 exige le WCAG 2.1 AA
• Royaume-Uni — les sites du secteur public doivent respecter le WCAG 2.1 AA

Même sans obligation légale directe, respecter le WCAG réduit votre exposition aux recours et rend votre site accessible à bien plus de monde. C'est un investissement qui vaut le coup.