Accessibilité des couleurs avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Le référentiel RGAA prend en compte différents types de handicap, avec en ligne de mire les utilisateurs souffrant de problèmes de vision.
1. Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Vous avez l’habitude de vous fier à la couleur d’un feu de signalisation pour savoir si vous devez vous arrêter : rouge ou orange on s’arrête, vert on passe. L’information est ici donnée par la couleur. Mais pas uniquement ! Une personne souffrant de daltonisme ou d’une autre pathologie l’empêchant de distinguer les couleurs se fit à l’emplacement de chaque lumière : rouge en haut, orange au milieu, vert en bas. En d’autres termes, sur un feu tricolore, l’information n’est pas donnée uniquement par la couleur.
Vous devez adopter la même démarche pour rendre votre site web plus accessible et conforme au RGAA. Imaginez par exemple un formulaire d’inscription en une newsletter avec deux boutons sans texte, l’un vert et l’autre rouge. En l’absence d’information complémentaire, un utilisateur ne distinguant pas les couleurs sera incapable de cliquer sur le bon bouton. L’ajout de texte ou simplement d’icônes rendra votre formulaire conforme au RGAA.
Imaginez un formulaire où les champs obligatoires sont affichés en rouge. Comment une personne incapable de distinguer les couleurs pourrait-elle les identifier ? L’ajout d’un élément caractéristique, tel qu’une astérisque, une mise en gras ou une mise en italique, permettra aux utilisateurs incapables de voir la couleur rouge de reconnaître les champs concernés.
Vous devez identifier les informations données par la couleur, et vérifier la présence d’une alternative ou d’un autre moyen de récupérer l’information (effet graphique, icône, mise en forme du texte, etc.).
Cette fois-ci, le texte fait référence à une information donnée par la couleur. Par exemple : cliquez sur le bouton rouge.
Vous devez vous assurer de proposer une alternative qui permet de récupérer autrement cette information (texte, mise en forme, icône, attribut title etc.).
Imaginez une infographie restituant les résultats d’un sondage, avec des graphiques en barres ou des camemberts. Si les différences entre les réponses “oui” et “non” ne se font que sur la couleur, votre infographie n’est ni accessible, ni conforme au RGAA.
Vérifiez que l’information est accessible autrement : présence d’un intitulé “oui” / “non” ou d’une icône, hachurages différents avec légende explicative, etc.
* Données figuratives, communiquées à titre d’exemple
La mise en forme d’une couleur, que ce soit pour un texte ou un encart, peut également passer par votre feuille de style CSS.
Pour que votre site soit conforme aux critères de couleurs du RGAA, vous devez également vous assurer que pour ces éléments où la couleur mise en forme par une propriété CSS, un autre moyen d’accès à l’information est possible.
Le terme « média temporel » désigne en réalité une vidéo ou un flux audio, qui demande un certain temps pour être consommé dans son intégralité. La thématique « Couleurs » du RGAA fait évidemment référence aux vidéos.
Imaginez que votre contenu vidéo contienne des graphiques où l’information est véhiculée uniquement par la couleur : pour le rendre accessible, vous devrez proposer des alternatives :
- Reprise de l’information dans la bande son,
- Reprise de l’information à l’écran par une icône, un texte ou autre.
Quelle que soit l’option retenue, je vous conseille de toujours sous-titrer ou retranscrire en texte vos vidéos dans une démarche d’accessibilité : les personnes malentendantes n’accèdent pas à la bande son de votre vidéo et ont besoin de texte, à l’inverse des personnes malvoyantes qui ont besoin de la bande son mais pas du texte.
Un média non temporel est un contenu statique, dont la consommation ne demande pas de suivre un rythme imposé par le média lui-même. Les textes, les images, les infographies sont des médias non temporels.
Le Référentiel général pour l’amélioration de l’accessibilité termine son critère 3.1 intitulé « Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? » par une allusion aux médias non temporels pour être sûr de ne passer à côté d’aucun format de contenu. En réalité, si vous avez déjà tenu compte des 5 règles précédentes, vous ne devriez guère vous soucier de ce point.
2. Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?
Vous ne vous en rendez pas compte si vous n’avez aucun problème de vue, mais de nombreuses personnes ont du mal à lire un texte lorsque le contraste entre les caractères et l’arrière-plan est insuffisant. Le RGAA s’appuie sur les recommandations des WCAG pour définir les niveaux minimums de contraste, ceux-ci variant en fonction de la taille du texte.
Le rapport de contraste est calculé en se basant sur la luminosité relative de deux couleurs. Plus la différence de luminosité est grande plus le contraste est élevé : un rapport de 7:1 offre ainsi un meilleur contraste qu’un rapport de 3:1.
Voici les rapports de contraste fixés par le Référentiel général d’amélioration de l’accessibilité entre le texte et l’arrière-plan selon la taille de la police d’écriture :
- Rapport de 4,5:1 pour une taille de police restituée inférieure à 18,5 px ;
- Rapport de 3:1 pour une taille de police restituée supérieure ou égale à 18,5 px : 3:1.
Ces tailles s’entendent sans effet de graisse, pour les textes présents dans le code ou affichés sur une image.
Notez que votre site est conforme au RGAA si un mécanisme alternatif, tel qu’une fonctionnalité « contraste élevé », permet d’afficher le texte avec un rapport de contraste plus élevé.
Cas particuliers
Dans certains cas, le rapport de contraste ne s’applique pas :
- Le texte appartient à un logo, le nom de marque d’un organisme ou d’une société ;
- Le texte ou l’image de texte joue un rôle uniquement décoratif ;
- Le texte faisant partie d’une image n’apporte aucune information essentielle, même s’il fait partie d’une image véhiculant une information ;
- Le texte ou l’image de texte appartient à un élément d’interface qui ne permet aucune action (par exemple un bouton avec l’attribut
disabled).
Imaginez par exemple une infographie portant sur une étude sur le métier d’infirmière libérale, agrémentée d’une infirmière dessinée qui dit “Soigner ? Plus qu’un métier, une passion !”. Cette phrase n’a qu’une fonction décorative, elle peut donc être écrite dans un rapport de contraste très faible.
Astuces et tutoriels sur l'accessibilité Web
3. Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées ?
Un composant d’interface désigne tout élément avec lequel un utilisateur peut interagir, par exemple un bouton, un lien, une icône cliquable ou une zone de saisie. Les critères du RGAA concernant les couleurs s’intéressent également aux composants d’interface, ce qui est logique et cohérent : à quoi bon accéder à un contenu, si on ne parvient pas à interagir de façon convenable avec l’interface ?
Vous devez vous assurer que vos composants d’interface offrent un rapport de contraste minimum de 3:1 avec la couleur d’arrière-plan.
Le RGAA souligne que ce rapport minimum concerne tous les états du composant : si un bouton rouge par défaut passe au bleu quand il est survolé et au vert une fois cliqué, vous devez vous assurer que le rouge, le bleu et le vert choisis offrent tous un rapport de contraste supérieur ou égal à 3:1.
Notez que vous pouvez proposer un mécanisme alternatif, comme une fonctionnalité « contraste élevé »,
Un élément graphique est une représentation visuelle. Il peut s’agir d’une image, d’une icône, d’un pictogramme ou d’un graphique.
Un rapport de contraste de 3:1 minimum est exigé pour une conformité au RGAA, avec la possibilité d’un mécanisme alternatif.
Un même élément graphique peut être composé de plusieurs couleurs. Lorsque ses couleurs sont nécessaires à la compréhension, il est important de respecter un rapport de contraste de 3:1 minimum.
Imaginez par exemple un cercle avec en son milieu une flèche. Le rapport de contraste entre la flèche et le cercle doit être de 3:1 minimum.
Le Référentiel Général d’amélioration de l’accessibilité permet le recours à un mécanisme permettant d’afficher une version du site avec un contraste plus élevé.
L’interface de cette fonctionnalité doit évidemment être conforme aux rapports de contraste évoqués dans la thématique « Couleurs » du RGAA : à quoi cela servirait d’avoir un outil pour aider les personnes souffrant de problèmes de vision, si cet outil n’est lui-même pas accessible ?
Comprendre les problèmes de vision associées à l'accessibilité web
De nombreuses pathologies oculaires peuvent l’expérience de certains utilisateurs.
Les personnes atteintes de cécité totale utilisent généralement un lecteur d’écran : la question des couleurs ne les concerne donc pas directement.
En revanche, certains internautes rencontrent des difficultés pour distinguer les couleurs ou lire un contenu lorsque le contraste est insuffisant. Ces situations nécessitent une attention particulière afin de garantir une bonne accessibilité de votre site.
Voici quelques exemples de troubles visuels qui demandent des adaptations spécifiques, avec entre parenthèse le pourcentage de la population concernée :
- Protanomalie : sensibilité réduite au rouge, et difficultés à distinguer le rouge et le vert (1,3 %) ;
- Protanopie : forme de daltonisme empêchant la perception du rouge (1,5 %) ;
- Deutéranomalie : sensibilité réduite au vert, avec des difficultés à distinguer le rouge et le vert (5,3 %) ;
- Deutéranopie : forme de daltonisme empêchant la perception du rouge (1,2 %) ;
- Tritanomalie : difficulté à distinguer le bleu et le vert, ainsi que le jaune et le rouge (0,02 %) ;
- Tritanopie : Incapacité à distinguer le bleu et le vert, le violet et le rouge, ainsi que le jaune et le rose (0,03 %) ;
- Achromatomalie : daltonisme partiel, avec une vision sans la plupart des couleurs (0,09 %) ;
- Achromatopsie : daltonisme total, avec une vision en nuances de gris (0,05 %) ;
- Glaucome : perte progressive de vision en périphérie ;
- Cataractes : opacification du cristallin de l’œil affectant la vision, lié notamment à l’âge.
Des outils en ligne permettent de mesurer de connaître instantanément le rapport de contraste entre deux couleurs. Je vous en propose deux dans mon contenu dédié aux outils de test de l’accessibilité :
Par exemple, le noir et le blanc offrent un très haut niveau de contraste, avec un rapport de 21:1.