Vérificateur de contraste des couleurs WCAG

Les exigences de contraste des WCAG

Les Web Content Accessibility Guidelines fixent des ratios de contraste minimaux pour que le texte reste lisible par les personnes malvoyantes, atteintes d'un trouble de la vision des couleurs ou tenant un téléphone en plein soleil. Les ratios vont de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).

AA, texte normal

Au moins 4.5:1 (critère de succès 1.4.3). Le niveau exigé par la plupart des lois et politiques d'accessibilité, dont l'Acte européen sur l'accessibilité, le RGAA en France et les recommandations de l'ADA aux États-Unis.

AA, grand texte

Au moins 3:1. Est considéré comme grand un texte de 24 px (18 pt) ou plus, ou de 18,66 px (14 pt) ou plus en gras.

AAA, texte normal

Au moins 7:1 (critère de succès 1.4.6). Le niveau renforcé, à viser pour les textes de lecture longue.

AAA, grand texte

Au moins 4.5:1.

Contraste des éléments non textuels

Au moins 3:1 (critère de succès 1.4.11) pour les icônes, les bordures de champs, les indicateurs de focus, les lignes de graphiques et les parties d'un contrôle qu'il faut voir pour l'utiliser.

Comment le ratio de contraste est calculé

Chaque couleur est convertie en luminance relative : les canaux sRGB sont linéarisés (en annulant la courbe gamma) puis pondérés à 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu, car l'œil est bien plus sensible au vert. Le ratio vaut alors (L1 + 0.05) / (L2 + 0.05), L1 étant la couleur la plus claire. Par exemple, #777777 sur blanc donne 4.48:1, juste en dessous du niveau AA, tandis que #767676 atteint 4.54:1 et passe.

Un ratio n'est jamais arrondi vers le seuil : les WCAG précisent explicitement que 4.49:1 n'atteint pas 4.5:1. Les couleurs translucides sont d'abord mélangées comme le navigateur les dessine, le premier plan sur le fond et un fond translucide sur du blanc.

Corriger une couleur non conforme

Les suggestions conservent la teinte et la saturation de votre couleur de texte et ne modifient que sa luminosité en OKLCH, l'espace colorimétrique perceptuel que CSS prend désormais en charge : elles assombrissent et éclaircissent par pas jusqu'à ce que le ratio passe, et retiennent la variante la plus proche de l'original. Le résultat est généralement la même couleur de marque, un peu plus profonde ou plus claire, plutôt qu'un saut vers le noir. Si aucune nuance de cette teinte ne peut atteindre l'objectif sur votre fond, l'outil le signale : c'est alors le fond qu'il faut changer.

Pour explorer d'autres variantes vous-même, ouvrez la couleur dans le convertisseur de couleurs et parcourez ses teintes et ses ombres, ou extrayez des couleurs candidates d'une photo avec le générateur de palette de couleurs.

Les erreurs de contraste courantes

• Texte indicatif et texte d'apparence désactivée. Un texte indicatif gris clair reste du texte, et il doit atteindre 4.5:1 si les utilisateurs en ont besoin. Les contrôles réellement désactivés sont exemptés, mais pas ce qui a seulement l'air désactivé.
• Texte sur des images et des dégradés. Vérifiez la partie la plus claire de l'image derrière le texte, pas la moyenne. Un voile sombre ou un panneau plein derrière le texte est la solution fiable.
• Couleurs de marque utilisées pour le texte. Un orange ou un turquoise vif peut paraître affirmé et pourtant échouer sur du blanc. Utilisez la suggestion pour trouver une variante plus profonde de la même teinte pour le texte, et gardez la couleur vive pour les grands titres ou la décoration.
• Indicateurs de focus et bordures de champs. Une bordure gris clair de 1 px autour d'un champ de texte échoue souvent à la règle de 3:1 pour les éléments non textuels, ce qui rend le champ difficile à repérer pour les personnes malvoyantes.
• Mode sombre. Une paire conforme dans le thème clair ne dit rien du thème sombre. Vérifiez les deux thèmes, en utilisant le bouton d'inversion pour un coup d'œil rapide à la paire inversée.

APCA et WCAG 3

Sous les résultats WCAG 2, vous verrez aussi une valeur de contraste de luminosité APCA, notée Lc. APCA est la méthode de contraste proposée pour les futures WCAG 3. Elle tient compte de la graisse de la police et du fait qu'un texte clair sur fond sombre n'a pas besoin du même contraste qu'un texte sombre sur fond clair, ce que la formule WCAG 2 ignore ; c'est aussi pourquoi son signe change quand vous inversez les couleurs. À titre indicatif, Lc 75 convient au corps de texte, Lc 60 aux autres textes à lire et Lc 45 aux grands titres. Les WCAG 3 sont encore à l'état de brouillon : considérez APCA comme une information complémentaire, les WCAG 2.x restant la norme à laquelle se réfèrent les audits et les lois.