Vérificateur de contraste des couleurs

Comment utiliser le vérificateur de contraste des couleurs

1. 1. Saisissez les deux couleurs. Entrez chacune en HEX (#777777), en rgb(), en hsl() ou par son nom CSS, ou utilisez le sélecteur. Inverser les échange, ce qui est pratique pour vérifier les versions clair sur sombre et sombre sur clair.
2. 2. Lisez le rapport et le tableau. Le rapport va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Le tableau le compare à chaque exigence du WCAG et indique « Réussi » ou « Échec » en toutes lettres, pas seulement par la couleur.
3. 3. Déterminez la taille. Le grand texte a des exigences plus basses. L'aperçu montre le texte normal, le grand texte, le grand texte en gras et un contrôle encadré pour juger votre propre cas.
4. 4. Corrigez une paire en échec. Choisissez le niveau visé et utilisez la couleur de texte ou d'arrière-plan suggérée. L'outil conserve la teinte et ne modifie que la luminosité, par le plus petit pas qui réussit.

Ce que demande le WCAG 2.2

Les Web Content Accessibility Guidelines (WCAG) 2.2 fixent des rapports de contraste minimaux dans trois critères de réussite. Le rapport est (L₁ + 0,05) ÷ (L₂ + 0,05), où L₁ est la luminance relative de la couleur la plus claire et L₂ celle de la plus foncée.

Le grand texte mesure au moins 18 points, ou 14 points en gras — soit 24 px et environ 18,7 px à l'écran à 96 ppp. Les logos, le texte purement décoratif et les commandes inactives sont exemptés du critère 1.4.3. La règle de 3:1 du critère 1.4.11 couvre les parties d'un composant nécessaires pour le repérer (la bordure d'un bouton, le contour d'une case à cocher), ses états, comme le focus, et les graphismes nécessaires à la compréhension du contenu, comme les traits d'un graphique.

Comment le rapport est calculé

Chaque canal sRGB est ramené entre 0 et 1 puis linéarisé : c ÷ 12,92 si c ≤ 0,04045, sinon ((c + 0,055) ÷ 1,055)^2,4. La luminance relative vaut alors 0,2126 R + 0,7152 G + 0,0722 B. Le vert compte le plus, car l'œil y est le plus sensible.

Le WCAG n'arrondit pas : un rapport de 4,4999 échoue au seuil de 4,5. Le vérificateur affiche donc le rapport arrondi à la baisse à deux décimales, de sorte qu'un résultat juste en dessous du seuil n'apparaît jamais comme réussi.

Vérifier les diapositives, les affiches et les figures

• Les diapositives et les affiches ne sont pas des pages web, mais les rapports de contraste du WCAG sont la référence admise pour elles aussi. Le corps du texte d'une diapositive est généralement grand (24 px équivalent à 18 pt) ; les légendes, les notes de bas de page et les étiquettes d'axes ne le sont pas, donc vérifiez-les comme du texte normal.
• Visez plus haut que le minimum pour la projection. Un projecteur dans une salle éclairée réduit le contraste pour tout le monde. Choisissez AAA (7:1) pour le texte d'une diapositive projetée dans une salle lumineuse.
• Le texte placé sur une photo ou un dégradé n'a pas d'arrière-plan unique. Vérifiez les zones les plus claires et les plus sombres derrière le texte, ou placez le texte sur un panneau plein.
• Les graphiques et les figures relèvent du critère 1.4.11 : les traits, les barres et les marqueurs doivent avoir un contraste de 3:1 avec l'arrière-plan. La couleur seule ne doit pas porter le sens — voir le Simulateur de daltonisme.
• Les couleurs translucides sont aplaties avant la mesure : l'arrière-plan est posé sur du blanc, puis le texte sur l'arrière-plan. Une page qui a autre chose derrière doit recevoir cette couleur saisie directement.

Une remarque sur l'APCA

L'Accessible Perceptual Contrast Algorithm (APCA) est une méthode candidate dans le projet de travail du WCAG 3, qui tient compte de la taille, du poids et de la polarité du texte. C'est un projet, pas une exigence, et aucune loi ni aucune norme n'en impose l'usage aujourd'hui. Les rapports WCAG 2.x — ceux de cet outil — restent la base des déclarations de conformité.

Questions fréquentes

Quel est un bon rapport de contraste ?

4,5:1 ou plus pour le texte normal respecte le niveau AA du WCAG, et 7:1 le niveau AAA. Le grand texte exige 3:1 pour AA et 4,5:1 pour AAA. Noir sur blanc est le maximum, 21:1. Tout ce qui est inférieur à 3:1 est difficile à lire pour beaucoup de personnes, même avec une bonne vue.

Qu'est-ce que le grand texte selon le WCAG ?

Un texte d'au moins 18 points (24 px) en graisse normale, ou d'au moins 14 points (environ 18,7 px) en gras. La taille se mesure telle qu'elle s'affiche : une police de diapositive qui paraît petite sur un document distribué peut rester grande une fois projetée.

L'exigence de contraste s'applique-t-elle aux icônes et aux traits de graphiques ?

Oui, par le critère de réussite 1.4.11 Contraste non textuel : les composants d'interface et les graphismes nécessaires à la compréhension du contenu doivent avoir au moins 3:1 avec les couleurs adjacentes. Les graphismes décoratifs et les composants inactifs sont exemptés.

Pourquoi ma couleur affiche-t-elle 4,49 alors que le rapport est presque 4,5 ?

Parce que le WCAG compare le rapport exact et n'accorde aucune tolérance d'arrondi. Une paire à 4,4999:1 échoue au seuil de 4,5:1, donc l'outil affiche la valeur arrondie à la baisse à deux décimales plutôt que 4,50.

Comment fonctionnent les couleurs suggérées ?

L'outil conserve la teinte et la saturation de votre couleur et ne modifie que sa luminosité HSL, vers le haut ou vers le bas par petits pas. Il renvoie la valeur la plus proche qui atteint le rapport visé, sous forme de code HEX à 8 bits. Si aucune luminosité n'y parvient — 7:1 contre un gris moyen, par exemple —, il le signale et suggère de changer l'autre couleur.

L'APCA est-il meilleur que le rapport WCAG ?

L'APCA modélise la perception de façon plus fine, surtout pour le mode sombre et le texte fin, mais il fait partie d'un projet (WCAG 3), pas d'une exigence acceptée. Les lois sur l'accessibilité et les normes d'achat qui citent le WCAG 2.x utilisent le rapport calculé ici.