Contrastes de couleurs de texte (partie 1) : pour qui et selon quelles règles d’accessibilité ?

Pour optimiser un site internet, il est essentiel de faciliter l’accès aux informations pour l’ensemble des utilisateurs et utilisatrices, et, bien sûr, cela concerne aussi les personnes en situation de handicap.

Les WCAG (Web Content Accessibility Guidelines – recommandation internationale rassemblant les règles pour l’accessibilité des contenus web) ainsi que le RGAA (Référentiel Général d’Accessibilité pour les Administrations – référentiel français lui-même basé sur les WCAG) présentent trois niveaux d’accessibilité (A, AA et AAA). Les niveaux AA (double A) et AAA (triple A) imposent des rapports minimaux de contrastes entre la couleur du texte et celle du fond, afin d’améliorer la lisibilité des contenus.

Dans cette série d’articles sur les contrastes de couleurs de texte, nous verrons d’abord pour qui c’est important et les règles à appliquer. Puis, nous aborderons la façon de choisir les bonnes combinaisons de couleurs sur son site web dans un deuxième article. Enfin, nous vous présenterons les mécanismes d’amélioration des contrastes dans un troisième article.

Qui a besoin que le texte soit suffisamment contrasté avec son fond ?

Ce sont, bien sûr, principalement les personnes malvoyantes qui ont besoin que le contenu textuel soit suffisamment contrasté avec sa couleur de fond, afin d’avoir la possibilité de le lire ou, en tout cas, plus de facilité à le faire.

Les personnes malvoyantes peuvent l’être en raison d’une cataracte ou d’un glaucome, par exemple. Cela peut toucher les personnes âgées mais pas seulement.

Les personnes ayant une déficience de la vision des couleurs, qui diminue parfois encore plus le contraste, peuvent également être gênées par un manque de contraste ; il s’agit généralement du daltonisme voire même de l’achromatopsie (absence totale de vision des couleurs).

Par exemple, sur l’ancien site de Tanaguru, les boutons rouges avec du texte blanc ont un ratio de contraste de 4,8:1 ; ce qui est conforme aux règles d’accessibilité (voir chapitre suivant). Si on utilise un logiciel simulant la vision des personnes daltoniennes, les couleurs vues ne sont alors plus les mêmes. Si on simule le type de daltonisme « deutéranopie », par exemple, on obtient alors un ratio de contraste de 3,4:1. La différence de contraste est flagrante.

Afin d’illustrer quelques exemples de problèmes de vision, vous pouvez essayer l’extension Funkify sur Google Chrome. Ainsi, vous pourrez vous rendre compte de ce à quoi peut ressembler votre site web avec certains handicaps.

Bien sûr, l’utilisation de contrastes renforcés soulagera les yeux d’à peu près tout le monde car, par exemple, le texte blanc sur fond jaune sera fort heureusement prohibé !

Il est important de noter que le respect des règles de contraste pour l’accessibilité ne permet pas d’affirmer avec certitude que le texte sera facilement lisible par tous les utilisateurs et utilisatrices. En effet, il existe beaucoup de perceptions différentes des couleurs selon les personnes, selon la culture ou selon les problèmes de vision. Certaines personnes lisent plus facilement sur un fond sombre, d’autres sur un fond clair. Certaines personnes hypersensorielles comme les personnes autistes pourraient être, à l’inverse, mises en difficulté face à un site qui présente des couleurs trop vives et/ou trop contrastées.

Le choix des couleurs est donc crucial et la proposition d’alternatives peut être d’un grand secours pour la conception d’un site web accessible, tout comme pour ses utilisateurs et utilisatrices finales.

Quels sont les rapports de contrastes à respecter ?

Les deux référentiels présentés en introduction (RGAA et WCAG) imposent tous deux un rapport de contraste minimal entre la couleur du texte et sa couleur de fond :

• La règle de niveau d’accessibilité AA impose un rapport de contraste minimal de 4,5:1 ;
• La règle de niveau AAA impose, quant à elle, un rapport de contraste minimal de 7:1 ; ce qui la rend encore plus difficile à respecter par défaut, car elle pose des restrictions créatives et de charte graphique.

Les critères de succès 1.4.3 et 1.4.6 des WCAG énoncent des exceptions pour trois cas.

Exception 1 : le texte agrandi

Les textes agrandis ont droit à une exigence un peu plus faible :

• 3:1 de rapport de contraste minimal pour le niveau AA (au lieu de 4,5:1) ;
• 4,5:1 de rapport de contraste minimal pour le niveau AAA (au lieu de 7:1).

Les textes agrandis sont :

• Les textes non gras (font-weight: normal;) qui sont en taille de police supérieure à 18pt, soit 24px.
• Les textes en gras (font-weight: bold;) qui sont en taille de police supérieure à 14pt, soit 18,5px.

Nous vous invitons à consulter la règle WCAG à ce sujet (en anglais), le RGAA 3 n’étant pas tout à fait à jour en parlant de 150% et 120% de la taille définie par l’auteur pour le document.

Si on part d’une couleur vert clair #9FD886 avec fond blanc #FFFFFF, le ratio initial est de 1,7:1. Voici par exemple ce qu’on pourrait obtenir avec des couleurs alternatives plus contrastées :

• Ce texte n’est pas en gras et en taille de police 23px ou moins. Nous devons écrire avec un ratio de 4,5:1 minimum. (couleur : #4D8434)
• Ce texte n’est pas en gras et en taille de police 24px ou plus. Nous devons écrire avec un ratio de 3:1 minimum. (couleur : #6BA356)
• Ce texte est en gras et en taille de police 18px ou moins. Nous devons écrire avec un ratio de 4,5:1 minimum. (couleur : #4D8434)
• Ce texte est en gras et en taille de police 18,5px ou plus. Nous devons écrire avec un ratio de 3:1 minimum. (couleur : #6BA356)

Il est généralement plus simple (et aussi bien plus lisible !) de se dire qu’on doit respecter le ratio de 4,5:1 minimum mais cette exception pour les textes agrandis peut rendre bien des services.

Par ailleurs, l’outil Colour Contrast Analyser permet de voir le rendu des couleurs selon trois types de daltonisme. Ainsi, on peut se rendre compte que le ratio perçu peut être inférieur à ce qu’on a prévu. C’est pourquoi il est conseillé, autant que possible, d’utiliser un ratio d’au moins 4,5:1.

Il faudra toutefois faire attention à la valeur « point » de Photoshop. En effet, Photoshop est parfois réglé par défaut sur l’unité « point » pour les tailles de polices même si on affiche les règles en unité « pixel ». C’est ce qui fait qu’il continue d’afficher « 16pt » alors qu’en réalité, pour une maquette à 72 PPP, en tout cas, il s’agit de « 16px ». Dans ce cas, la valeur « point » ne reflète pas la réalisation et 1 point Photoshop équivaut alors à 1 pixel CSS.

Afin d’éviter d’avoir une vision faussée et de croire qu’on utilise des points alors que ce sont des pixels, on ira modifier la valeur dans les préférences dans les menus « Préférences » puis « Unités et règles » puis « Unités », « Type » et enfin « Point » (à transformer en « Pixel »).

Par ailleurs, les ordinateurs ont aujourd’hui tendance à avoir, de plus en plus, des résolutions folles malgré des petits écrans (full HD sur un écran de 13 pouces par exemple). Il est alors possible (et souvent recommandé) d’agrandir la mise à l’échelle dans les paramètres de son système d’exploitation et de la régler sur 125% par exemple. De cette façon, les éléments sont moins petits à l’affichage. Cependant, cela fausse complètement le parallèle entre la maquette sous Photoshop et le navigateur. On veillera donc à régler la mise à l’échelle de l’ordinateur à 100% au moment de réaliser les ajustements de tailles de police entre maquette et CSS.

Exception 2 : le texte décoratif

Il n’y a aucune exigence de contraste pour les textes décoratifs :

• Les textes qui font partie d’un composant d’interface utilisateur inactif comme, par exemple, un bouton ou un champ de formulaire avec un attribut HTML disabled ;
• Les textes purement décoratifs : textes qui n’apportent aucune information, qui sont là pour décorer comme une image le ferait, qu’on pourrait retirer sans que cela nuise à la compréhension du contenu. Les WCAG donnent pour exemple la couverture d’un dictionnaire avec des mots très clairs, en transparence, utilisés comme fond ;
• Les textes qui ne sont visibles pour personne : cela fait sans doute référence à cet ancien temps où on a pu écrire du texte blanc sur blanc à destination des moteurs de recherche… ;
• Les textes qui font partie d’une image (voire même d’une photographie) qui contient un autre contenu significatif. Cette phrase un peu alambiquée signifie que le texte qui se trouverait un peu par hasard dans une image (par exemple, un panneau de rue dans une photographie) n’est pas concerné par la règle de contraste.
  En revanche, s’il s’agit d’une image-texte (un texte véhiculé sous forme d’image), la règle des contrastes s’applique même si ça peut être difficile de changer la couleur du texte ou de fond. Dans ce cas (et même dans tous les cas), il est conseillé d’utiliser un texte mis en forme en CSS directement. Si ce n’est pas possible, il faudrait fournir l’image en haute résolution pour que le zoom ne pixellise pas trop l’image et qu’on puisse la lire malgré tout. Une alternative textuelle sera également demandée pour les personnes ne voyant pas les images.

Exception 3 : les logotypes

Il n’y a pas non plus d’exigence de contraste pour les textes faisant partie d’un logo ou d’un nom de marque. Évidemment, si un texte de logo utilise des couleurs suffisamment contrastées, bien lisibles, ce sera mieux ; il sera plus visible par tout le monde mais on ne peut pas obliger une entreprise à refaire son logo.

⁂

En guise de récapitulatif, vous trouverez ci-dessous un tableau avec les ratios de contrastes à utiliser pour les textes en fonction de la taille et de la graisse de police et, en fonction du niveau d’accessibilité attendu.