Les couleurs web et l'accessibilité : WCAG et APCA. Opacité, contraste, luminance

Comment associer couleur de fond et texte de manière accessible, ce que l'opacité change dans l'équation, et ce que WCAG 3 va modifier dans nos habitudes.

Contraste, luminance et opacité

WCAG 2.2 définit le contraste entre deux couleurs à partir de leur luminance relative, une mesure physique de la quantité de lumière émise, corrigée par la sensibilité de l’œil humain aux différentes longueurs d'onde. Le rouge, le vert et le bleu ne contribuent pas de manière égale à la luminance perçue : le vert pèse environ 72%, le rouge 21%, le bleu seulement 7%.

Le ratio de contraste se calcule entre la luminance de la couleur la plus claire et celle de la plus sombre. WCAG exige un ratio minimum de 4,5:1 pour du texte normal (niveau AA). Ce seuil s'applique à n'importe quelle association fond/texte, pas seulement texte noir sur fond blanc.

C'est là que l'opacité complique les choses. Quand on applique une transparence à un texte, la couleur perçue n'est plus celle du texte seul mais le résultat de sa composition avec le fond, via l'alpha-blending. Chaque canal RVB du texte est pondéré par l'alpha, puis complété par la contribution du fond. La couleur finale dépend donc des deux, et le ratio de contraste change en conséquence.

La relation entre opacité et contraste n'est pas linéaire. Un texte noir à 50% sur fond blanc ne donne pas la moitié du contraste d'un texte noir à 100%. La correction gamma de la luminance WCAG introduit une non-linéarité qui rend le calcul analytique difficile. La solution est numérique : on cherche par dichotomie l'opacité maximale pour laquelle le ratio reste au-dessus de 4,5:1.

Ce seuil dépend entièrement de l'association fond/texte. Sur un fond sombre, un texte blanc peut supporter une opacité très basse avant de perdre sa conformité. Sur un fond clair pastel, la marge est plus étroite. Et sur certaines couleurs saturées, comme les jaunes vifs ou les cyans, le texte noir reste conforme à des opacités très faibles, là où le texte blanc échoue rapidement.

WCAG 3 et APCA : ce qui va changer

WCAG 2.2 a le mérite d'être simple : un ratio, un seuil, une règle universelle. Mais cette simplicité a un coût. Le modèle traite de la même façon un titre en 32px gras et un texte de légende en 12px régulier, alors que l'oeil ne les perçoit pas du tout pareil. Un ratio de 4,5:1 peut être largement suffisant dans un cas et juste tolérable dans l'autre.

WCAG 3 introduit APCA, Accessible Perceptual Contrast Algorithm, développé par Andrew Somers. L'approche est fondamentalement différente : le contraste n'est plus un ratio symétrique entre deux luminances, mais une valeur directionnelle qui tient compte de la taille de police, du poids typographique, et du sens de lecture fond clair sur fond sombre versus fond sombre sur fond clair.

Le résultat est exprimé en valeur Lc, ou Lightness Contrast, de -108 à +106. Les seuils recommandés varient selon l'usage : un texte courant en 16px régulier exige un Lc d'environ 75, un titre en 24px bold peut se contenter de 60, un texte décoratif non fonctionnel descend à 30. Plus de règle unique, mais une grille de lecture qui colle mieux à la réalité typographique.

L'impact sur l'opacité est significatif. Puisque APCA pondère différemment les associations fond clair/texte sombre et fond sombre/texte clair, l'opacité maximale utilisable n'est pas la même selon les deux algorithmes. Pour certaines couleurs, WCAG 2.2 est plus restrictif. Pour d'autres, c'est APCA qui exige davantage. Calculer les deux en parallèle permet de comprendre où les deux référentiels divergent et d'anticiper la transition.

WCAG 3 n'est pas encore un standard ratifié. APCA est en phase de finalisation. Mais les outils qui l'implémentent déjà montrent que la transition va demander de revoir certaines associations de couleurs qui passaient en WCAG 2.2 sans difficulté.

Couleurs système

CSS Color 4 qui suivent color-scheme, pour peu qu'on s'en serve. Et c'est très pratique pour respecter la configuration des utilisateurs.

Sans paire :

• ButtonBorder
• GrayText (texte désactivé)
• LinkText
• VisitedText
• ActiveText

Les anciens mots-clés (Window, WindowText, ButtonHighlight, ButtonShadow, Menu, MenuText, Scrollbar, ThreeD*, etc.) sont dépréciés et alias de ces couleurs.

AccentColor et AccentColorText ont un support plus récent, à vérifier selon la cible.

Les couleurs web standard

Quand on parle de couleurs en CSS, on pense aux valeurs hexadécimales, aux variables custom, aux palettes construites dans Figma. Les couleurs nommées ont une image poussiéreuse, cornflowerblue, hotpink, des reliques des débuts du web, bonnes pour les prototypes ou les exemples de documentation.

C'est dommage. Ces 147 mots-clés couvrent l'intégralité du spectre chromatique, sont standardisés par le W3C et supportés partout sans exception. Surtout, ils constituent un terrain d'expérimentation idéal pour aborder un sujet que beaucoup contournent : le contraste accessible et l'impact de l'opacité sur la conformité WCAG.

Les couleurs web : un spectre organisé

Triée alphabétiquement, la liste des couleurs web semble chaotique. Triée par teinte HSL, elle révèle une structure cohérente.

HSL, Hue, Saturation, Lightness, décrit une couleur par trois axes perceptuels : la teinte sur une roue de 0 à 360 degrés, la saturation et la luminosité de 0 à 100%. C'est la représentation la plus proche de la façon dont l’œil perçoit et distingue les couleurs.

Triées par teinte, les 147 couleurs forment des familles naturelles : rouges, oranges, jaunes, verts, cyans, bleus, violets, roses. À l'intérieur de chaque famille, saturation et luminosité dessinent des gradients du plus saturé au plus pastel, du plus sombre au plus clair.

Les achromatiques, noir, blancs, gris, forment un groupe à part. Saturation nulle, teinte sans signification. Triés par luminosité croissante, ils constituent une échelle naturelle du black au white.

Un tableau des 147 couleurs nommées, avec mots-clés, valeurs hexadécimales et rgb(). Pour chaque couleur de fond, l'opacité maximum du texte pour rester conforme WCAG AA est calculée et affichée.