Vérificateur de contraste

Comment utiliser Vérificateur de contraste

1. Choisissez la couleur du texte et celle du fond.
2. Consultez le rapport et les niveaux atteints.
3. Ajustez la luminosité jusqu'au niveau requis.

Les seuils des WCAG

Le rapport s'exprime comme une proportion, de 1:1 (identiques) à 21:1 (noir sur blanc).

Le texte de grande taille commence à 18 points, ou 14 points en gras. En pixels, cela correspond environ à 24 px, ou 18,66 px en gras.

Le niveau AA est celui qu'exige la réglementation. Le AAA est un objectif plus ambitieux, rarement atteignable en conservant une identité de marque.

Les logotypes en sont exemptés, tout comme le texte purement décoratif et les éléments d'interface désactivés.

Un point souvent négligé : l'exigence de 3:1 pour les composants concerne les bordures de champs de formulaire, les icônes porteuses de sens et l'indicateur de focus. Une bordure gris clair sur fond blanc échoue presque toujours.

Le RGAA : une obligation chiffrée

C'est ici que la France se distingue des autres pays européens.

Le Référentiel général d'amélioration de l'accessibilité traduit les critères des WCAG en une liste de tests numérotés et vérifiables. Il ne se contente pas de renvoyer à la norme : il dit comment tester chaque point.

Cela change la nature de l'exercice. Un audit RGAA aboutit à un taux de conformité, exprimé en pourcentage des critères applicables satisfaits, et non à une appréciation générale.

Les organismes concernés — administrations, collectivités, certaines entreprises au-delà d'un seuil de chiffre d'affaires — doivent publier une déclaration d'accessibilité mentionnant ce taux, un schéma pluriannuel de mise en accessibilité et un plan d'action annuel.

La mention du niveau de conformité doit figurer en page d'accueil, et un manquement à ces obligations de publication est passible d'une sanction financière.

Par ailleurs, la directive européenne sur l'accessibilité étend des obligations à des services privés — commerce en ligne, services bancaires, transport de voyageurs, entre autres.

Les obligations exactes dépendent de votre statut et de votre activité : vérifiez votre cas auprès de la réglementation en vigueur. Le critère technique, lui, ne bouge pas : niveau AA.

Et au-delà de la contrainte, une raison concrète : environ une personne sur douze présente une déficience de la vision des couleurs, et bien davantage lisent sur écran en plein soleil ou avec une vue fatiguée.

Corriger un contraste insuffisant

On dispose de plus de marge qu'on ne le croit sans abîmer la maquette.

Assombrissez le texte plutôt que d'éclaircir le fond. Cela modifie généralement moins l'impression d'ensemble.

Si la couleur de marque ne passe pas, réservez-la aux grands éléments — titres, aplats de fond, grandes icônes — et pas au texte courant.

Augmenter la saturation ne sert presque jamais : c'est la luminance qui compte. Deux couleurs très saturées peuvent avoir un contraste déplorable entre elles.

Attention au texte sur image, le manquement le plus fréquent. Il lui faut un calque de couleur semi-transparent, une ombre portée, ou un cartouche plein.

Un cas particulièrement négligé : le texte indicatif des champs de formulaire, souvent gris très clair. S'il porte une information nécessaire, il doit satisfaire le contraste comme n'importe quel texte — et cette information ne devrait pas s'y trouver seule.

Vérifiez aussi le mode sombre séparément. Une palette conforme en clair peut échouer une fois inversée, et le blanc pur sur noir pur produit un éblouissement inconfortable pour beaucoup de lecteurs.

Questions fréquentes