Contrastes de couleurs de texte (partie 2) : comment choisir les bonnes combinaisons de couleurs accessibles pour son site web ?

Dans la partie 1 de « Contrastes de couleurs de texte », nous avons vu pour qui il est important d’utiliser des couleurs de texte suffisamment contrastées avec leur couleur de fond et les règles d’accessibilité à respecter.

Dans cette deuxième partie, nous allons donner quelques pistes pour créer des maquettes graphiques conformes aux ratios de contrastes attendus pour l’accessibilité. En effet, choisir des combinaisons de couleurs n’est pas forcément chose facile ; choisir les bonnes combinaisons accessibles, lisibles l’est encore moins. Heureusement, il existe un certain nombre d’outils pour vous aider à trouver ces combinaisons.

Vérifier les combinaisons de couleurs

Lorsqu’on a déjà les couleurs d’une charte graphique définies et qu’on démarre la conception d’un site web, ou lorsqu’on crée une charte graphique, il est important de vérifier le plus tôt possible les combinaisons de couleurs de texte et couleurs de fond qui sont utilisables et accessibles.

La société Atalan a créé une Grille d’analyse des contrastes d’une charte qui est très pratique pour ça et permet d’éviter bien des catastrophes.

Dans la capture de la grille ci-dessus, on peut, par exemple, identifier que les combinaisons suivantes sont conformes pour un niveau AA :

• Le blanc avec du noir, bleu foncé, gris foncés, rouge ou violet ;
• L’orange avec du noir ou bleu foncé ;
• Le rouge avec du blanc ou gris clair ;
• Le vert avec du noir uniquement ;
• etc.

Trouver les bons ratios de contraste

Tanaguru Contrast Finder est un outil qui suggère les contrastes de couleurs valides selon le niveau d’accessibilité souhaité.

Il s’agit d’un outil en ligne qui permet de saisir la couleur du texte, la couleur de fond et le ratio de contraste minimum souhaité (3:1, 4,5:1, 7:1).

Ensuite, selon les besoins et si le ratio de contraste est invalide, on choisira que l’outil nous donne :

• des exemples de couleurs de texte valides en conservant la couleur de fond initiale ;
• ou des exemples de couleurs de fond valides en conservant la couleur de texte initiale.

Dans les deux cas, l’outil pourra proposer soit des couleurs valides proches de la couleur initiale, soit une palette de couleurs valides.

Par exemple, si avec une couleur de texte verte et une couleur de fond vert clair, on lui demande de nous fournir une palette de couleurs valides en modifiant la couleur de texte mais en conservant celle du fond, on pourra avoir des propositions de texte vert, violet, bleu, gris.

Tester les contrastes d’un site

Un outil indispensable pour tester les contrastes de couleurs est Colour Contrast Analyser (CCA) de The Paciello Group.

Il s’agit d’un petit logiciel disponible pour Windows et pour Mac qui est très pratique :

• Il dispose d’une fonctionnalité « pipette » qui permet d’aller chercher la couleur à tester tout en zoomant sur la zone survolée avec la souris.
  Malheureusement, la fonction zoom n’existe plus dans la nouvelle version de CCA donc je conserve toujours l’ancienne version (CCA ancienne version pour Windows et pour Mac) ;
• Il indique si la combinaison de couleurs est conforme pour un niveau AA ou AAA en montrant le rendu ;
• Il permet de voir le rendu pour au moins trois différents types de daltonisme en indiquant le ratio de contraste associé.

Gérer le contraste du texte sur ou dans les images

Écrire du texte sur des images est une pratique que l’on rencontre souvent sur le web.

Si, au début du projet, les graphistes ont pris grand soin de choisir des images de fond qui permettent un ratio de contraste suffisant entre le texte et la partie de l’image qui est derrière ; ce n’est pas toujours avec un si grand soin que la prochaine image pour la remplacer sera choisie.

Par ailleurs, il faut prendre en considération que les personnes malvoyantes zooment souvent le texte des sites web afin de mieux le lire. Il peut alors arriver que le texte jusqu’à présent placé au bon endroit sur l’image pour être lisible, se retrouve au mauvais endroit et devienne illisible.

En revanche, écrire du texte incrusté dans les images est une tendance qui se voit heureusement de moins en moins. En effet, l’avènement de la navigation sur mobile et donc du responsive a fait qu’il est de plus en plus compliqué d’utiliser cette pratique car l’image devient souvent floue ou pixellisée voire illisible selon les contextes. Avec cette pratique de texte incrusté dans l’image, les personnes qui zooment pour mieux voir le texte ne le voient finalement pas mieux, les personnes aveugles n’ont pas accès à l’information s’il n’y a pas d’alternative textuelle, etc.

Avant toute chose, il faut savoir que :

• Le niveau de contraste exigé entre les textes et leur couleur de fond s’applique aussi aux textes ayant pour fond des images, ainsi qu’aux textes en image.
• La technique WCAG associée à ce sujet est la technique G18 « s’assurer que le rapport de contraste est au minimum de 4,5:1 entre le texte (et les textes en image) et le fond. »
• Le ratio de contraste d’un texte sur une image ou d’un texte en image se mesurera en relevant comme couleur de fond, le pixel qui a la couleur la plus proche de celle de la couleur de texte et le plus proche du texte. Si le texte est blanc, on relèvera le pixel le plus clair le plus proche du texte.
  C’est pourquoi, par exemple, on voit souvent une fine bordure noire autour du texte blanc dans les sous-titres d’une vidéo. Le fond du texte changeant régulièrement, il s’agit d’une technique pratique pour assurer la lisibilité des sous-titres.

Il existe quelques solutions en CSS pour régler ce problème :

• Mettre un contour autour du texte (d’au moins un pixel – cet exemple que nous avons réalisé « Texte sur image lisible / accessible » qui utilise la propriété CSS text-shadow ainsi que, si supportée, la propriété CSS non standard -webkit-text-stroke) ;
• Mettre une ombre derrière le texte si le contraste est trop faible en haut ou en bas mais correct à l’opposé (propriété text-shadow en CSS) – cas d’utilisation très rare ;
• Mettre un halo derrière le texte (propriété text-shadow ou background avec dégradé radial semi-transparent en CSS) – cas complexe à mettre en place pour obtenir le bon ratio ;
• Mettre un fond de couleur unie derrière le texte. Il peut être semi-transparent ;
• Utiliser un mécanisme d’amélioration des contrastes pour appliquer une des règles ci-dessus seulement pour les utilisateurs et utilisatrices qui ont activé ce mécanisme. Cette technique sera évoquée en détails dans le troisième article de cette série.

Afin d’illustrer la difficulté que le texte sur les images représente, voici quelques exemples qui, partants pourtant d’une bonne idée et d’une bonne volonté, n’arrivent pas totalement à satisfaire la règle des contrastes pour le texte sur les images.

Exemple de couleur de fond derrière le texte

Par exemple, Samsung, pour son site sur un de ses produits, a fait le choix d’ajouter, via le mécanisme d’amélioration des contrastes, un fond derrière la plupart de ses textes présents sur les images. Malheureusement, certains textes ont été oubliés.

Exemple d’ombre portée sur le texte

De son côté, REI Co-op a fait le choix de rendre son texte plus lisible directement en ajoutant une légère ombre portée derrière le texte. Malheureusement, si la lisibilité du texte s’en voit grandement améliorée, le ratio de contraste n’est toujours pas suffisant. Si, avec la pipette de Colour Contrast Analyser, on prend le pixel le plus proche du texte à l’endroit le plus clair (la cascade), on obtient un ratio de 2,4:1 au lieu de 4,5:1.

Cependant, augmenter l’opacité de cette ombre portée n’y changerait rien. En effet, le problème de l’ombre portée est qu’elle n’est pas totalement uniforme sur tout le tour des lettres ; or, ici, il y a des lettres entières placées sur la cascade de couleur très claire. Il faudrait utiliser une autre technique pour que la conformité soit totale.

Exemple de fond transparent derrière le texte

Sur le site Dialogue & Solidarité, le carrousel de la page d’accueil possède des grandes images. Le texte est mis par-dessus les images et rendu plus lisible grâce à un carré transparent (opacité 75%) derrière le texte. Dans l’exemple ci-dessous, le texte est gris foncé. Si on relève la couleur de fond au niveau du texte sur les cheveux de la femme en photo, on obtient un ratio de 2,8:1 au lieu de 4,5:1. Afin d’obtenir un ratio suffisant, l’opacité du fond transparent devrait être de 90% minimum.

⁂

En résumé, il est possible de choisir les bonnes combinaisons de couleurs pour son site afin que le texte respecte toujours le ratio attendu pour les règles d’accessibilité en fonction de sa couleur de fond. Cependant, il faut s’y prendre en amont car cela facilite grandement le travail. De nombreux outils existent et peuvent nous faciliter la tâche. Utilisons-les dès la création des maquettes graphiques.

Si on pense d’emblée à l’accessibilité des contenus, on utilisera sans doute le texte sur les images avec parcimonie ou bien, on réfléchira sérieusement à la façon de s’assurer de leur lisibilité tout en conservant un graphisme cohérent. Il est toujours plus compliqué de revenir sur une maquette graphique validée que de respecter les bonnes pratiques dès le départ.

Par ailleurs, gardons toujours à l’esprit que le contenu ne doit pas seulement être beau mais qu’il doit surtout être lisible et compréhensible. Les messages passent évidemment bien mieux quand on peut les lire.