Ratios de contraste WCAG dans le design produit réel — cas et pièges
Ce qu'un ratio de contraste mesure vraiment
Un ratio de contraste WCAG compare la luminance relative de deux couleurs — le texte et son fond — sur une échelle de 1:1 (identiques) à 21:1 (noir pur sur blanc pur). La formule est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Le mot clé est luminance, pas teinte : le contraste concerne à quel point les couleurs sont claires ou sombres, pas à quel point elles paraissent différentes.
C'est pourquoi deux couleurs vives et manifestement différentes peuvent quand même échouer. Un rouge moyen et un vert moyen peuvent avoir presque la même luminance, donnant un ratio proche de 1:1 — du texte dans l'une sur un fond de l'autre est quasi illisible, même si ce sont des « couleurs différentes ». Contraste et coloris ne sont pas la même chose.
Les seuils, précisément
Le niveau AA de WCAG 2 exige 4.5:1 pour le texte normal et 3:1 pour le grand texte. Grand est défini comme au moins 24px (18pt), ou 18.66px (14pt) en gras — une taille de pixel inférieure ne compte comme « grand » que si elle est en gras. Le niveau AAA porte cela à 7:1 normal et 4.5:1 grand.
Il y a une règle à part qu'on oublie : le critère de succès 1.4.11 (contraste non textuel) exige 3:1 pour les composants d'interface et les graphiques porteurs de sens — bordures de bouton, contours de champ, icônes, indicateurs de focus — par rapport à leurs couleurs adjacentes. Les contrôles désactivés sont exemptés des minimums de contraste, mais cette exemption est largement détournée pour justifier des états inactifs difficiles à voir.
Où les vrais designs échouent
L'échec le plus courant est du texte gris clair sur blanc au nom de l'« élégance ». Un gris moyen comme #999999 sur blanc n'est qu'à environ 2.8:1 — il échoue AA franchement. Le texte indicatif (placeholder) est généralement encore plus clair et ne passe presque jamais, et pourtant les équipes y mettent régulièrement de vraies instructions.
Les couleurs de marque sont un autre piège : beaucoup de palettes de marque en demi-teinte échouent AA pour le libellé d'un bouton sur un champ blanc, donc le libellé doit foncer ou le bouton aussi. Le texte sur une image d'en-tête ou un dégradé est le cas le plus subtil — le ratio de contraste change pixel par pixel, donc une légende peut passer sur la partie sombre d'une photo et échouer sur la partie claire. Le mode sombre est oublié aussi : un gris foncé à faible contraste sur noir échoue tout autant que son cousin en mode clair.
Les pièges qu'un vérificateur ne détecte pas
Un vérificateur de contraste compare deux couleurs plates, mais le vrai texte n'est pas plat. Un ratio qui passe avec une graisse normale peut mal se lire dans une police fine ou capillaire, car le calcul ignore l'épaisseur du trait — les glyphes fins mettent moins d'encre à l'écran que le ratio ne le laisse croire. Le petit texte anti-crénelé baisse aussi le contraste sur les bords.
Deux autres pièges : appliquer l'exemption de grand texte à du texte gras mais encore petit (il doit atteindre le seuil de taille), et traiter un ratio qui passe comme une accessibilité complète. Le contraste (1.4.3) et le fait de ne pas se fier qu'à la couleur (1.4.1) sont des exigences séparées — un lien qui passe le contraste mais ne se distingue du texte que par la couleur échoue quand même. Teste toujours le texte sur images et dégradés au pixel du pire cas, pas à la moyenne.
WCAG 2 aujourd'hui, APCA demain
Le ratio de WCAG 2 est utile mais imparfait. Parce qu'il ne modélise ni la taille de police, ni la graisse, ni comment la vision humaine perçoit réellement clair-sur-sombre contre sombre-sur-clair, il peut être trop strict sur certaines combinaisons de texte clair et trop laxiste sur certaines sombres. Les designers le sentent quand un appariement « a l'air correct » mais échoue, ou « a l'air fin » mais passe.
Le remplacement proposé est APCA (Accessible Perceptual Contrast Algorithm), exploré pour le futur WCAG 3. APCA pondère la taille, la graisse et la polarité du contraste, visant à coller de plus près à la perception. Il n'est pas encore normatif — tu ne peux pas revendiquer une conformité face à lui. La posture pragmatique : livre en WCAG 2 AA aujourd'hui, et surveille APCA pour voir où va le standard.
À retenir
Retiens deux nombres : 4.5:1 pour le corps de texte, 3:1 pour le grand texte et les composants d'interface. La plupart des décisions y reviennent.
Ne fais pas confiance à l'« élégance » du gris sur blanc — #999 sur blanc échoue AA ; vérifie avant de livrer.
Teste le texte sur images et dégradés au pire pixel, pas à la moyenne, car le ratio varie sur la surface.
Un ratio qui passe avec une police capillaire échoue quand même pour de vrais lecteurs — considère la graisse et la taille, pas seulement le nombre.
Le contraste et l'indépendance à la couleur sont des exigences séparées — n'utilise jamais la couleur comme seul signal. Le vérificateur de contraste de couleur de ce site calcule le ratio WCAG 2 et le résultat AA/AAA pour n'importe quelle paire.