Focus sur les couleurs, les contrastes et l’accessibilité.

Ce que j’ai fait :

• lire l’article Contrastes de couleurs de texte (partie 1) : pour qui et selon quelles règles d’accessibilité ?(lien externe) de Julie Moynat sur Tanaguru
• lire l’article Accessibilité et couleurs : outils et ressources pour concevoir des produits accessibles(lien externe) de Stéphanie Walter
• lire l’article Assurer un contraste suffisant entre les couleurs de premier plan et de fond(lien externe) d’Orange
• lire la notice Assurer un contraste suffisant entre les textes et l’arrière-plan ou proposer une alternative contrastée(lien externe) d’AcceDe Web

Ce que j’ai appris

Couleur, constraste et accessibilité

Dans la conception d’un site internet, le choix des couleurs, et plus globalement d’une charte graphique, est une étape primordiale. Ce choix est d’autant plus important que tout le monde ne distingue pas les couleurs de la même façon.

Dans cet article, nous nous intéressons au critère 3.2 du Référentiel Général d’Amélioration de l’Accessibilité (RGAA) :

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) ?

En effet, afin d’améliorer la lisibilité des contenus, les contrastes doivent être suffisants entre la couleur du texte et la couleur du fond. Les personnes impactées par des défauts d’accessibilité sur les contrastes sont :

• les personnes malvoyantes (âgées ou non)

• les personnes souffrant de daltonisme

• les personnes se trouvant dans un environnement où la perception des couleurs et des contrastes est rendue difficile : comme la consultation d’un site sur mobile au soleil, ou sur un rétroprojecteur

Des outils en ligne peuvent vous permettre de simuler des problèmes de vision :

• Basse vision en ligne(lien externe), pour une simulation des différents troubles de la vision

• l’extention Funkify(lien externe) sur Google Chrome pour visualiser à quoi ressemble vos pages web avec différents problèmes de vision

• l’inspecteur d’accessibilité de Firefox (à partir de la version 70) propose un simulateur de déficience de perception des couleurs

Niveaux à respecter

Il s’agit des niveaux recommandés par le RGAA suivant les règles de niveau d’accessibilité AA. Les recommandations concernent aussi bien le texte directement intégré dans un site que le texte sur ou dans des images.

Texte normal

La couleur d’un texte (ou texte en image) non gras inférieur à 24px doit au minimum atteindre un rapport de contraste de 4.5:1 par rapport à la couleur de son arrière-plan.

La couleur d’un texte (ou texte en image) en gras inférieur à 18.5px doit au minimum atteindre un rapport de contraste de 4.5:1 par rapport à la couleur de son arrière-plan.

Les règles de niveau d’accessibilité AAA imposent au minimum d’atteindre un rapport de contraste de 7:1.

Grand texte

La couleur d’un texte (ou texte en image) non gras supérieur ou égal à 24px doit au minimum atteindre un rapport de contraste de 3:1 par rapport à la couleur de son arrière-plan.

La couleur d’un texte (ou texte en image) en gras supérieur ou égal à 18.5px doit au minimum atteindre un rapport de contraste de 3:1 par rapport à la couleur de son arrière-plan.

Les règles de niveau d’accessibilité AAA imposent au minimum d’atteindre un rapport de contraste de 4.5:1.

Exceptions et alternatives

Les niveaux de constraste recommandés ne sont pas applicables pour les éléments suivants :

• les textes faisant partie d’un logo

• les textes purement décoratifs

• les textes faisant partie d’un élément d’interface sur lequel aucune action n’est possible (par exemple un bouton avec l’attribut disabled).

Pour plus d’informations sur les exceptions, je vous invite à lire l’article détaillé de Julie Moynat, Contrastes de couleurs de texte (partie 1) : pour qui et selon quelles règles d’accessibilité ?(lien externe).

Dans le cas où l’implémentation de couleurs contrastées ne pourrait être appliquée (pour une charte graphique déjà existante par exemple), il est possible de proposer une alternative à travers un mécanisme permettant de rendre les contenus plus lisibles. Le plus souvent, il s’agit de mettre en place un commutateur de styles CSS (ou style switcher). Le commutateur de styles CSS permet d’afficher une feuille de style alternative avec des couleurs différentes de celles par défaut. C’est le cas par exemple sur le site Oui.sncf(lien externe) où l’option d’accessibilité propose d’afficher des contrastes renforcés.

Note de l’autrice (15 décembre 2019) : suite à une remarque de Julie Moynat, je vous invite à jeter un oeil au commutateur de styles du site Sncf.com(lien externe), plus pertinent et complet que celui du site Oui.sncf. Ce dernier ne permet en effet pas d’atteindre les niveaux de conformité et n’est pas disponible en version mobile,contrairement au commutateur de styles de Sncf.com.

Outils pour vérifier les contrastes

• Colour Constrast Analyser(lien externe) : un outil hors ligne que l’on peut installer sur Windows, MacOS et Linux indique si le niveau de constraste est respecté et permet de vérifier le rendu pour différents types de daltonisme.

• Tanaguru Contrast Finder(lien externe) : un outil en ligne pour vérifier le rapport de contraste entre deux couleurs, et qui propose une nouvelle couleur si celle choisie ne correspond pas au rapport de contraste souhaité.

Stéphanie Walter, dans son article Accessibilité et couleurs : outils et ressources pour concevoir des produits accessibles(lien externe), cite également des outils pour construire une palette de couleurs accessible tels que Accessible color palette builder(lien externe).