Contrastes de couleurs de texte (partie 3) : le mécanisme d’amélioration des contrastes

Si un site ne respecte pas nativement les rapports de contrastes ou si la charte graphique a été créée en amont et ne permet pas de les respecter, le niveau d’accessibilité AA permet d’implémenter un mécanisme pour modifier une page web afin de la rendre plus lisible.

Dans le RGAA (Référentiel Général d’Accessibilité pour les Administrations), il s’appelle « mécanisme qui permet d’afficher le texte avec un rapport de contraste conforme ».

Il y a deux solutions :

• Une page alternative : cette solution n’est pas recommandée mais possible. Il faudrait fournir une page alternative qui serait conforme aux recommandations sur les couleurs. Cela implique généralement d’avoir un site alternatif complet ; ce qui est fortement déconseillé en termes de maintenabilité. Ce genre de sites alternatifs est toujours oublié dans les opérations de mises à jour et finit par être complètement cassé voire pas du tout à jour. Cela représente aussi plus de travail à la conception.
  Selon les règles des WCAG (« Web Content Accessibility Guidelines », en français « Règles d’accessibilité pour les contenus web »), un lien vers cette page devra être disponible en début de page donc, dans l’en-tête du site.
• Un commutateur de style CSS (style switcher) : ce mécanisme fonctionne généralement avec un bouton-poussoir (switch) : l’activation d’un bouton désactive les autres. Cela permet, par exemple, d’afficher une feuille de style alternative avec des couleurs différentes de celles par défaut. Ces couleurs peuvent être complètement différentes de celles de la charte graphique. On parle de « switcher de couleurs ».
  On peut appliquer plusieurs options :
  • Utiliser les couleurs de la charte en les renforçant pour atteindre un rapport de contraste de 4,5:1 au moins. Tanaguru Contrast-Finder sera alors d’une grande aide ;
  • Afficher tout le site en couleurs dites « inversées » : noir et blanc, noir et jaune, bleu et jaune, voire en négatif comme ce que propose Apple dans ses systèmes d’exploitation par exemple. Ce mode inversé peut être intéressant pour les personnes qui lisent plus facilement sur un fond sombre. En effet, les sites sont quand même majoritairement sur fond clair ;
  • Régler, s’il y en a, les problèmes de lecture du texte sur les images en appliquant des styles particuliers (fond de couleur derrière le texte, application d’un halo…). Certains sites masquent carrément les images dans ce cas ; ce n’est pas forcément une solution souhaitable dans la mesure où cela peut rendre le site bien moins attrayant, plus austère. De plus, on peut perdre de l’information visuelle (si c’est la vue d’un lieu que l’on souhaite visiter par exemple) ;
  • Permettre aux utilisateurs et utilisatrices de choisir librement, ou parmi une liste définie, une couleur de fond et une couleur de texte qui leur conviendrait mieux.

Une technique pour un switcher de couleurs

Afin de créer un switcher de couleurs, il est possible d’utiliser la fonctionnalité CSS de feuilles de style alternatives avec un complément de JavaScript pour pouvoir activer ces feuilles de style via des boutons dans le site web.

Pour éviter les surcharges de CSS et les oublis de style de certains éléments, avec un pré-processeur CSS comme Sass, on pourra, par exemple, créer deux fichiers contenant les variables de couleurs de la charte web. Les variables auront les mêmes noms mais, dans les deux fichiers, les valeurs ne seront pas les mêmes : dans le premier fichier, ce seront les valeurs initiales, dans le second, ce seront les valeurs de contrastes renforcés. Deux feuilles de style seront à générer : l’une appelant tous les fichiers Sass avec le premier fichier de variables, l’autre appelant tous les fichiers Sass avec le second fichier de variables.

Voici par exemple un premier fichier de variables « normal » (en Sass), qu’on appellerait « _variables-identity-colors.scss » :

// Corporate identity colors
$color-text: #888888;
$color-title: #EF362C;
$color-link: #73A3B8;

Et un deuxième fichier de variables en contraste renforcé, qu’on appellerait « _variables-identity-colors-high-contrast.scss » :

// Corporate identity colors - high contrast
$color-text: #333333;
$color-title: #D90B0B;
$color-link: #055A7F;

Dans ce cas, il y aura deux fichiers Sass de variables de couleurs à importer séparément et les autres partiels Sass. Ce seront les fichiers Sass qui appellent tous les partiels qui feront la distinction du bon fichier de variables à appeler.

Le fichier par défaut « styles.scss » :

@import "variables-identity-colors";
@import "header";
@import "footer";

Le fichier pour les contrastes renforcés « styles-high-contrast.scss » :

@import "variables-identity-colors-high-contrast";
@import "header";
@import "footer";

Avec le compilateur de Sass vers CSS, une erreur sera remontée si une variable est oubliée dans l’un des deux fichiers de variables. Ainsi, il n’y a pas de risque d’oubli de ce côté. En revanche, si un nouveau partiel Sass est créé, il faut penser à l’ajouter dans les deux fichiers « styles.scss » et « styles-high-contrast.scss ». Le mécanisme d’amélioration des contrastes doit évidemment entrer dans les processus de tests à chaque nouvelle fonctionnalité développée.

Dans le code HTML, dans la balise <head>, on appellera ces deux feuilles de style alternatives :

<link href="styles.css" rel="stylesheet" type="text/css" title="Style par défaut">

<link href="styles-high-contrast.css" rel="alternate stylesheet" type="text/css" title="Contrastes renforcés">

L’attribut title de ces deux feuilles de style est ce qui permet de les rendre interchangeables. Le contenu de l’attribut title est ce qui va apparaître dans les navigateurs qui supportent nativement cette fonctionnalité. Par exemple, dans Firefox, cela apparaîtra dans la barre de menu, dans « Affichage » puis « Style de la page ».

La feuille de style par défaut aura un attribut rel="stylesheet" tandis que la feuille de style alternative aura une valeur en plus dans cet attribut : rel="alternate stylesheet".

Ensuite, avec deux boutons (<button type="button">) que nous pourrions nommer « Contrastes renforcés » et « Contrastes par défaut », on ira switcher en JavaScript entre les deux feuilles de style.

On pensera, bien sûr, à enregistrer le choix en cookie navigateur pour qu’il soit conservé à chaque changement ou rechargement de page.

On peut ensuite très facilement créer d’autres feuilles de style avec différents thèmes de couleur. Ainsi, si le site utilise des couleurs vives, comme un rose pétant par exemple, ou un jaune un peu fluo, qui pourraient gêner certaines personnes hypersensorielles et / ou autistes, il sera possible de proposer une feuille de style avec des couleurs moins vives. Cela n’est pas demandé par le référentiel d’accessibilité mais, pour autant, cela peut s’avérer utile.

En complément, nous vous proposons un exemple de mise en place d’un switcher de couleurs sur notre Github que vous pouvez voir en démonstration également.

Forme et position du mécanisme d’amélioration des contrastes dans le site web

Cette solution de mécanisme d’amélioration des contrastes pose quelques problèmes d’utilisabilité.

Le RGAA manque en effet de précision concernant l’utilisation du mécanisme. Il ne fait aucune mention de son emplacement ou de sa méthode d’implémentation, ce qui rend parfois le mécanisme inutilisable.

Cependant, la mise à jour 2017 du RGAA, a ajouté un point essentiel, conformément aux WCAG : le mécanisme doit lui-même respecter le niveau de contraste minimum. De cette façon, on s’assure au moins que les utilisateurs et utilisatrices qui ont besoin d’un contraste renforcé puisse trouver le mécanisme d’amélioration de ces contrastes.

Dans les WCAG, la technique G174 : « Fournir un mécanisme avec un contraste suffisant permettant aux utilisateurs et utilisatrices d’afficher la page avec des contrastes suffisants. » apporte notamment un autre élément important : le mécanisme devrait être placé de façon évidente dans la page pour aider les utilisateurs et utilisatrices à y accéder facilement. En parallèle, si on combine ce point à la technique G136 « Fournir un lien au début d’une page web non-conforme qui permet d’accéder à une version alternative conforme », il paraît évident qu’il faudrait placer cet élément dans l’en-tête de la page.

Formes et emplacements des mécanismes d’amélioration existants

De plus en plus d’organismes sont concernés par les problématiques d’accessibilité. On trouve évidemment une grande quantité de sites institutionnels ou dédiés au handicap mais pas seulement. Certaines entreprises telles que Samsung ou la banque CIBC possèdent déjà ce mécanisme de contrastes. On remarquera, au passage, que, malheureusement, à ce jour, de nombreux sites qui implémentent ce type d’outil ont régulièrement quelques textes qui sont oubliés du mécanisme.

Afin d’analyser les différentes possibilités d’implémentations de mécanismes, nous avons récolté des exemples pour évaluer les solutions déjà existantes. En parallèle, nous avons créé un document partagé avec une liste de sites web possédant un mécanisme d’amélioration des contrastes (en anglais).

• MoMA
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un bouton avec un intitulé « Use high-contrast text » et une icône de deux demi-lunes noire et blanche
  • Emplacement : juste au-dessus du pied de page
  • Points forts :
    • L’intitulé du bouton est clair.
  • Points faibles :
    • Les textes en vert clair s’affichent en orange foncé mais celui-ci ne respecte toujours pas le ratio de contraste de 4,5:1 attendu.
    • Son emplacement dans le pied de page.
    • L’icône est très petite ; on la reconnaît donc mal.
• Samsung Gear 360
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : deux boutons carrés avec une bordure et la lettre « C » à l’intérieur. L’un est noir avec texte jaune, l’autre blanc avec texte gris
  • Emplacement : juste au-dessus du pied de page
  • Points forts :
    • Ils ont pensé à gérer le contraste du texte sur les images même si certains ont été oubliés.
  • Points faibles :
    • Il se trouve dans le pied de page et celui-ci est particulièrement difficile à atteindre en descendant avec la molette de la souris puisque le défilement est détourné par moment pour réaliser des effets visuels.
    • Ces deux boutons sont des liens (mauvaise sémantique HTML) qui ont pour intitulé la seule lettre « C ». Heureusement, une infobulle précise l’intitulé avec un texte plus pertinent « High contrast button » et « Default contrast button ».
    • Certains textes ont été oubliés et ne sont pas en contrastes renforcés (dont un sur une image).
• Potbelly
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un bouton avec une icône de deux demi-lunes noire et bleu clair
  • Emplacement : Pied de page
  • Points forts :
    • Icône pertinente
  • Points faibles :
    • Son emplacement
    • Il ne fonctionne pas comme on s’y attend puisqu’on trouve toujours du texte jaune ou vert clair sur fond blanc. De plus, le problème du texte écrit par-dessus les images n’est pas traité via ce mécanisme.
• Handicap Zéro
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : cinq boutons carrés avec une couleur de fond et la lettre « A » à l’intérieur d’une couleur différente : noir & blanc, blanc & noir, rouge & blanc, jaune & noir, bleu et blanc
  • Emplacement : dans la partie supérieure du site
  • Points forts :
    • Mécanisme très visible et explicite
  • Points faibles :
    • Le mécanisme affiche une autre version du site avec moins de contenu.
    • Il est visiblement impossible de revenir à la version initiale si la version choisie ne nous convient pas.
• The Scottish Parliament
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : trois boutons avec trois intitulés différents « Normal Contrast », « Low Contrast » et « High contrast »
  • Emplacement : dans la page « Accessibility » puis dans la rubrique « Text Size & Colour Contrast »
  • Points forts :
    • Le mécanisme propose une version en contrastes faibles qui, tout en respectant la règle du ratio de contraste à 4,5:1 pourra mieux convenir à certaines personnes autistes, par exemple.
    • Les intitulés de boutons et l’explication sont très explicites.
  • Points faibles :
    • Le mécanisme n’est disponible que via une sous-page de la page « Accessibilité » à laquelle on peut heureusement accéder depuis l’en-tête du site.
• Greewich Jobs and careers
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un bouton texte blanc sur fond gris avec une icône de la lettre « A » et le libellé « Text options » qui permet de déplier un petit menu « Change text size » avec cinq boutons en texte bleu sur fond blanc à l’intérieur. Celui pour changer les contrastes s’appelle « High contrast » et a une icône carrée rouge avec la lettre « A » blanche à l’intérieur.
  • Emplacement : dans l’en-tête
  • Points forts :
    • L’emplacement
    • Les libellés de la fenêtre qui s’ouvre et du bouton d’activation du mécanisme sont explicites.
  • Points faibles :
    • L’activation des contrastes renforcés dévoile un site avec une feuille de style qui ne fait qu’appliquer des couleurs. Tous les autres effets de style sont absents.
    • Revenir au mode d’affichage par défaut est compliqué car, le bouton pour revenir à la vue par défaut est, au départ avant l’activation du mode contrasté, dans la fenêtre avec les boutons de gestion de taille du texte. Puis, une fois le mode contrasté activé, le bouton de retour se trouve visuellement en dehors de cette liste. Il est, certes, placé en premier en haut de page mais on est vite désorienté.
• The Arc’s Austism Now Center
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : une petite barre orange avec un texte introductif « Viewing Options: » puis deux boutons avec les libellés « Normal » et « High Contrast ». Tous les textes sont en blanc.
  • Emplacement : une option en permanence affichée en bas à droite de l’écran
  • Points forts :
    • Les libellés sont explicites et pertinents.
  • Points faibles :
    • Le bouton, sur un écran large, peut être difficile à trouver dans la mesure où il s’affiche en position fixe en bas (il peut être dans le vide).
    • Le ratio de contraste avec le fond orange et le texte blanc n’est pas conforme. Il y a donc peu de chance que le mécanisme soit trouvé facilement.
    • Tous les contrastes ne sont pas corrigés.
• NUFC
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un lien « Turn on High Contrast » entre parenthèses dans une phrase et écrit en couleur dorée sur fond blanc.
  • Emplacement : dans la page « accessibilité », au milieu du texte
  • Points forts :
    • Libellé explicite
  • Points faibles :
    • Le mécanisme est uniquement disponible depuis la page « accessibilité » et au milieu du texte.
    • Le rapport de contraste entre la couleur du texte et la couleur de fond est de 2,3:1. Il sera donc très difficile à trouver.
    • La couleur dorée est toujours utilisée pour le texte. Elle a été mise en gras mais cela n’est pas suffisant pour rendre les contrastes de couleur conformes. Sur la page d’accueil, le titre est en gris foncé sur fond noir donc illisible.
• Kingston Frontenac Public Library
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un bouton avec une icône de deux demi-lunes blanche et noire.
  • Emplacement : dans l’en-tête
  • Points forts :
    • Le bouton est immédiatement visible.
    • Au survol, une infobulle affiche la signification du bouton (le bouton a même un libellé accessible à l’intérieur).
  • Points faibles :
    • L’intitulé du bouton n’est pas présent immédiatement (si on recherche « Contraste » dans la page, on ne le trouve donc pas).
    • Le bouton doit être réactivé après chaque clic sur une page.
• Alder Hey Children’s Hospital
  • Aperçu du mécanisme d’amélioration des contrastes :
    
  • Aspect : un texte introductif « Contrast: » avec, à côté, quatre boutons qui ressemblent à des boutons radio avec un gros rond de couleur et un petit rond au milieu d’une autre couleur : blanc & noir, bleu clair & bleu foncé, beige & bleu foncé, jaune & noir.
  • Emplacement : une barre fixe en bas du site, avec un bouton dont le texte est à moitié masqué « Hide this section » qui permet d’ouvrir les paramètres d’accessibilité
  • Points forts :
    • Devant les puces de contraste, le texte « Contrast » est écrit lisiblement et les puces ont une infobulle navigateur qui s’affiche au survol.
  • Points faibles :
    • Le mécanisme de contraste est quasiment impossible à trouver puis qu’il est caché dans un système d’accordéon dont le bouton d’ouverture s’appelle incompréhensiblement « Masquer cette section » et est masqué pour moitié verticalement.
      
    • Le système de puces pour les contrastes n’est pas clair car peu conventionnel.
    • Le mécanisme n’est pas accessible en navigation clavier.

Cette liste démontre qu’il existe de nombreuses méthodes pour intégrer un mécanisme d’amélioration de contraste à sa page web. Cette multiplicité est problématique puisque, si une personne a besoin de contrastes forts, elle doit pouvoir identifier rapidement la solution pour l’activer. Si chaque site a sa propre méthode, il devient très difficile de s’y retrouver. Par ailleurs, les méthodes d’implémentation sont plus ou moins approximatives.

Quelques règles qui pourraient être établies

Il est donc fortement recommandé :

• de placer la fonctionnalité de manière visible ;
• de placer la fonctionnalité dans les premiers liens de la page, dans l’en-tête ;
• d’utiliser une icône communément utilisée en lui associant un texte pour la rendre compréhensible de tout le monde.

Préciser le fonctionnement du mécanisme dans la page accessibilité du site, si celle-ci existe, est également une bonne pratique.

Les boutons activant les mécanismes de contrastes sont souvent dotés d’une icône. Les icônes suivantes reviennent le plus souvent :

• Deux demi-cercles noir et blanc : il semble que ce soit l’icône symbolique pour le contraste si on fait une recherche dans son moteur de recherche préféré. L’icône de contraste est l’icône recommandée pour ce type de mécanisme car c’est l’icône qui représente la fonctionnalité et qui ne réduit pas la fonctionnalité à un type de handicap.
  
  Source de l’icône de contraste
• Le symbole des déficiences visuelles (œil barré avec, à gauche, l’œil hachuré et à droite, l’œil « normal ») : ce symbole n’est pas totalement adapté dans la mesure où il concerne également les personnes aveugles. En effet, celles-ci ne seront pas concernées par une version plus contrastée du site. Par ailleurs, d’autres personnes, pas forcément malvoyantes, pourront apprécier la fonctionnalité d’amélioration des contrastes.
  
  Source de l’icône des déficiences visuelles
• La lettre A sur fond sombre : « A » comme la première lettre de l’alphabet et qu’on utilise souvent pour symboliser un outil agissant sur le texte. Cependant, cela peut se confondre avec une autre fonctionnalité souvent implémentée en accessibilité : le grossissement des caractères avec des boutons « A+ » et « A− ». En revanche, cela peut être pratique pour représenter les différentes combinaisons de couleurs prévues s’il y a du noir et blanc, jaune et bleu, jaune et noir, par exemple.

Quelle que soit l’icône choisie pour le bouton d’amélioration des contrastes, il est vivement conseillé de lui ajouter un libellé bien explicite et visible comme « Version contrastée » ou « Contrastes renforcés » afin qu’il n’y ait aucun doute sur l’usage du bouton et qu’il puisse être trouvé plus facilement. Pouvoir faire une recherche du mot « Contraste » dans la page et trouver le mécanisme sera certainement très appréciable.

Lors de la maintenance ou de l’évolution du site, il faudra penser à mettre à jour, si nécessaire, la feuille de style associée au mécanisme d’amélioration des contrastes.

En bref, ce qu’il faut retenir sur les règles de contrastes de couleurs

• Le ratio de contraste à appliquer entre la couleur de texte et sa couleur de fond est de 4,5:1, sauf exception. Les textes en image et les textes sur les images sont également concernés.
• Il est préférable que les rapports de contrastes soient valides sans avoir besoin d’un mécanisme alternatif.
• Si un mécanisme d’amélioration des contrastes de couleurs est utilisé :
  • Le bouton ou le lien permettant d’activer le mécanisme d’amélioration des contrastes doit respecter la règle de contraste minimum afin d’être identifiable par les personnes en ayant besoin.
  • Le mécanisme doit être conforme aux règles d’accessibilité dans son fonctionnement (sémantique HTML, navigation au clavier, compatibilité avec les technologies d’assistance…).
  • Ce bouton doit se trouver dans l’en-tête du site web, visible, afin qu’on puisse le trouver directement en arrivant sur le site.
  • Le bouton peut posséder une icône explicite (les deux demi-cercles noir et blanc, par exemple) mais il devra surtout avoir un libellé explicite comme « Contrastes renforcés », idéalement visible, pour pouvoir l’identifier ou le rechercher facilement. Si on souhaite le masquer contre tout bon conseil, on utilisera la technique du texte masqué en CSS lisible par les lecteurs d’écran.
  • Une fois le mécanisme activé, celui-ci doit l’être pour l’ensemble du site et conserver ce paramètre en cookie ou session dans le navigateur afin de ne pas avoir à réactiver l’option pour chaque page visitée.
  • Le test de rendu avec le mécanisme d’amélioration des contrastes doit être intégré dans les scénarios de tests de recette afin d’éviter les oublis de textes non contrastés. En effet, les experts et expertes en accessibilité réalisent ce test lors des audits sur un échantillon de pages seulement. De plus, les audits sont moins fréquents que les recettes. Or, il serait dommage de proposer une fonctionnalité d’aide qui n’aide qu’à moitié.
  • Le mécanisme doit être expliqué dans la page concernant l’accessibilité du site web, page qui est obligatoire dans le cadre du RGAA.

Ressources complémentaires

• Cet article est la suite des deux articles suivants :
  • Contrastes de couleurs de texte (partie 1) : pour qui et selon quelles règles d’accessibilité ?
  • Contrastes de couleurs de texte (partie 2) : comment choisir les bonnes combinaisons de couleurs accessibles pour son site web ?
• Une autre méthode pour créer un mode sombre avec Sass, par Katie MacTigue (en anglais, sur Medium)
• Une technique pour faire un switcher de couleurs avec des variables CSS (sur un site avec, malheureusement, des problèmes de contrastes), par Jonathan Harrell (en anglais)
• Comment utiliser -ms-high-contrast, par Greg Whitworth (en anglais)
• La requête média prefers-color-scheme, sur MDN. Cela ne peut pas remplacer un mécanisme d’amélioration des contrastes et ne répond pas forcément à un besoin d’accessibilité. Cependant, cette requête media peut être utilisée en complément du mécanisme avec bouton-poussoir en activant, par exemple, le mode sombre contrasté par défaut selon le choix des utilisateurs et utilisatrices.
• Un outil, en anglais, pour obtenir les codes hexadécimaux des couleurs inversées, malheureusement non conforme aux règles d’accessibilité