Contrastes de couleurs : Pourquoi le ratio 4.5:1 ne suffit plus
En Bref : L'essentiel à retenir
- Le WCAG 2.1 (avec son ratio de contraste 4.5:1) est la norme actuelle pour l'accessibilité, mais son algorithme présente des limites, notamment en ce qui concerne la perception humaine de la lumière.
- L'APCA, le futur algorithme pour les WCAG 3.0, prendra en compte des facteurs comme l'épaisseur de la police, la taille du texte et la polarité pour une évaluation plus précise du contraste.
- Bien que le WCAG 2.1 reste la norme légale, il est recommandé de tester les palettes de couleurs avec l'APCA pour améliorer la lisibilité réelle, surtout pour les textes fins.
- L'accessibilité va au-delà des calculs mathématiques et se concentre sur la perception visuelle, ce qui permet plus de liberté créative pour les designers.
Si vous êtes designer, vous connaissez la règle par cœur : 4.5:1 pour le texte normal, 3:1 pour le grand texte. C'est la loi du WCAG 2.1. Vous utilisez des outils comme "Contrast Checker", vous avez le badge vert, tout va bien. Vraiment ?
Les limites du calcul actuel
L'algorithme actuel du WCAG est vieux. Il calcule une différence mathématique brute entre deux couleurs. Le problème, c'est qu'il ne prend pas en compte la façon dont notre cerveau perçoit réellement la lumière.
- Le problème du bouton orange : Un texte blanc sur fond orange vif échoue souvent au test WCAG 2.1. Pourtant, il est parfaitement lisible pour l'œil humain.
- Le mode sombre : L'algorithme actuel est moins pertinent pour les textes clairs sur fond sombre. Intégrez ces palettes directement dans votre Design System pour éviter les erreurs des designers.
Le futur : APCA (Advanced Perceptual Contrast Algorithm)
C'est la grande nouveauté attendue pour les WCAG 3.0 (projet "Silver"). L'APCA ne raisonne plus en "ratio" (4.5:1) mais en "légèreté perçue" (Lc).
Ce que change l'APCA :
- Le contexte compte : L'APCA prend en compte la graisse (font-weight) et la taille de la police. Un texte très fin a besoin de beaucoup plus de contraste qu'un texte gras, même à couleur égale.
- La polarité : Il distingue le texte noir sur fond blanc du texte blanc sur fond noir.
- Plus de liberté créative : Il valide certaines combinaisons (comme le blanc sur orange) que le WCAG 2.1 rejetait à tort, redonnant de la souplesse aux designers.
Que faire aujourd'hui ?
Légalement, le WCAG 2.1 (et donc le ratio 4.5:1) reste la norme en vigueur pour le RGAA. Vous devez le respecter pour être conforme.
Cependant, pour une expérience utilisateur optimale :
- Continuez à viser le AA (4.5:1) pour la conformité.
- Mais testez vos palettes avec l'APCA (disponible dans certains plugins Figma) pour vérifier la vraie lisibilité.
- Soyez particulièrement vigilants sur les textes fins (Light/Thin) qui sont souvent illisibles même avec un bon ratio mathématique.
L'accessibilité n'est pas qu'une affaire de maths, c'est une affaire de perception.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Le contraste des composants d'interface et des éléments graphiques porteurs d'information doit être d'au moins 3:1 par rapport à leur arrière-plan.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.