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