Designer pour l’humain qui a besoin de contraste – Critère 3.2 du RGAA 4.1
Énoncé du critère 3.2
Nos problèmes de vision ont déjà été cités dans le post précédent sur le critère 3.1 du RGAA 4.1.
Le critère 3.2 aborde quant à lui la question de la lecture des textes à l’écran, donc la capacité de lire un texte d’une certaine couleur sur un fond d’une autre couleur.
Son énoncé est le suivant :
Critère 3.2. Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Champ d’application du critère 3.2
Le critère 3.2 s’applique à tous les textes, à l’exception des logos, des textes purement décoratifs et des textes faisant partie d’un élément interactif avec lequel on ne peut pas interagir (le texte d’un bouton grisé, par exemple).
Il couvre ainsi :
- les titres, sous-titres, chapôs…
- les textes de la page au format html ou textes de labeur (paragraphes, descriptions de vignettes, citations…)
- les textes inclus dans les images, qui véhiculent de l’information à l’utilisateur (on évitera d’avoir du texte dans les images car cela pose toujours des problèmes de confort de lecture, en format mobile par exemple…)
Qu’est-ce que le contraste ?
Le critère 3.2 nous parle de contraste. Tout le monde sait ce qu’est le contraste dans le langage courant. Sauf qu’ici on est pas au café à discuter de ce qui est contrasté ou pas…
Derrière le mot contraste, il faut entendre une définition scientifique. En effet, n’ayant pas tous la même perception, le contraste pour l’un sera plus visible que le contraste pour un autre. Ainsi, le contraste est une valeur qui doit se mesurer afin de définir des seuils qui auront du sens pour tout le monde.
Sa définition scientifique est la suivante :
« Opposition marquée entre la luminosité d’une couleur de premier plan et d’une couleur d’arrière-plan. Le rapport de contraste est basé sur la différence de luminance relative entre l’arrière-plan et le premier plan selon la règle : (L1 + 0,05) / (L2 + 0,05) où L1 est la luminance relative la plus claire et L2 la luminance relative la plus sombre. »
Je sens que ça fait mal au crâne. Passons au design !
La matrice à avoir sous la main pour bien designer
Je la mets en image ci-dessous afin que vous puissiez l’utiliser par la suite :
C’est simple : il y a 2 contrastes à retenir (4.5:1 et 3.1) et le seuil d’application est différent selon que la typographie comporte un effet de graisse (seuil = 18,5px) ou non (seuil = 24 px).
Comment mesurer ce contraste ?
Pour mesurer un contraste sur web ou sur des maquettes, il a plein d’outils. Nous, nous utilisons Color contrast analyser, dispo sur Mac et PC et bien sûr gratuit.
Il y a aussi un outil natif dans Figma pour ceux qui l’utilisent en phase de conception.
Nos projets web ayant fait l’objet d’un travail spécifique d’accessibilité :
Fondation Inria
Métropole Toulon Provence Méditerranée
Fonds d’art contemporain – Paris Collections
Métropole Grand Lyon
Abbaye de Fontevraud
Sylvain Hourany est le fondateur de Perméable.
Diplômé ingénieur de l’Université de Technologie de Compiègne en 2001, puis du mastère Multimédia – hypermédia ENSBA / ENST en 2002, Sylvain a fondé l’agence Perméable en 2003. Il a plus de 20 ans d’expérience dans l’accompagnement d’acteurs institutionnels, publics et privés dans la conception et la réalisation de leurs outils de communication.
Prêt à passer à l’étape suivante ?
On commence par un appel de 30 minutes, gratuit, sans engagement. Vous repartez avec un diagnostic clair des axes d’amélioration prioritaires de votre site internet.
Questions fréquentes
Oui. Le critère 3.2 couvre les textes inclus dans des images qui véhiculent de l’information. Pour un texte superposé à une image ou une vidéo, la mesure du contraste doit être effectuée sur la zone la plus défavorable, là où l’écart entre la couleur du texte et la couleur de l’arrière-plan est le plus faible. C’est l’une des configurations les plus complexes à valider, car la couleur d’arrière-plan varie. Des techniques comme les overlays semi-transparents ou les halos de texte sont utilisées pour garantir le respect des seuils dans ces cas.
Les seuils RGAA sont basés sur la luminance relative, pas sur la distinction des teintes. Cela signifie qu’un rouge et un vert peuvent avoir un rapport de contraste de 4,5:1 en termes de luminance tout en étant indiscernables pour une personne atteinte de deutéranopie (forme la plus courante de daltonisme, environ 1 % de la population mondiale). Les seuils RGAA ne garantissent donc pas une lisibilité optimale pour tous les types de déficiences chromatiques, ils adressent principalement les déficiences de sensibilité au contraste. Voilà pourquoi le critère 3.1 du RGAA existe : l’information ne doit pas être donnée uniquement par la couleur.
Non. Le critère 3.2 du RGAA couvre uniquement les textes. Les éléments graphiques non textuels – icônes, bordures de champs de formulaire, graphiques, indicateurs d’état – sont couverts par un critère distinct : le critère 3.3 du RGAA (issu du critère de succès WCAG 2.2, 1.4.11 « Non-text Contrast »), qui impose un seuil de 3:1 pour ces éléments. C’est un point fréquemment ignoré lors des audits partiels qui se concentrent uniquement sur les textes.
Oui, le RGAA prévoit des cas particuliers d’exemption pour le critère 3.2 : les textes faisant partie d’un logo ou d’un nom de marque, les textes décoratifs sans contenu informatif, les textes faisant partie d’un élément inactif (bouton désactivé), et les textes faisant partie d’une image à contenu principalement non textuel. Ces exemptions ne dispensent pas d’un effort de conception : un bouton désactivé illisible reste un mauvais choix de design même s’il est techniquement conforme.
Il est utile en phase de conception mais insuffisant pour un audit officiel. Figma affiche le rapport de contraste entre deux couleurs sélectionnées, ce qui aide les designers à vérifier leurs choix en temps réel. Ses limites : il ne vérifie pas automatiquement l’ensemble des éléments textuels d’un fichier, il ne détecte pas les problèmes de contraste sur les textes superposés à des images, et il ne couvre pas les éléments non textuels (critère 3.3). Pour un audit RGAA formalisé, des outils dédiés comme l’extension WAVE, Axe, ou une vérification manuelle avec Color Contrast Analyser restent nécessaires.
