Lorsqu’on parle de contraste de couleurs, on fait surtout mention de la différence de luminosité entre deux couleurs. Dans chaque conception visuelle (autant sur le Web que pour tout ce qui est numérique), l’esthétique occupe généralement une place centrale. Une conception qui attire l’œil permet généralement d’être davantage consultée qu’une conception qui n’est pas visuellement belle.
Principalement de nos jours, les concepteurs et les conceptrices ont le devoir de créer des expériences inclusives et conviviales en tenant compte des besoins des individus. Un des éléments cruciaux de l’accessibilité visuelle est justement le contraste des couleurs. Il faut s’assurer d’avoir une bonne accessibilité visuelle lors de la création de contenu, afin que les informations et le contenu soient accessibles à tout le monde, y compris aux personnes ayant une déficience visuelle (cécité, daltonisme, etc.).
Introduction aux contrastes de couleurs
Pour une page Web ou pour un document numérique, le contraste de couleurs fait surtout référence au contraste entre les couleurs d’avant-plan (principalement le texte) et les couleurs d’arrière-plan (le fond d’un contenu numérique).
Le choix de couleurs peut affecter directement la lisibilité et la visibilité des textes, des graphiques et des éléments interactifs. Choisir le bon contraste de couleurs permettra à chaque utilisateur et à chaque utilisatrice de bien comprendre le contenu numérique. Mais, ce sera surtout bénéfique aux personnes ayant une déficience visuelle.
Il est donc important de choisir judicieusement de bonnes couleurs en évitant d’utiliser des combinaisons à faible contraste. Pour donner des exemples précis :
- Texte gris (#808080) sur fond blanc (#FFFFFF)
- Texte jaune (#FFFF00) sur fond vert (#00FF00)
- Texte noir (#000000) sur fond blanc (#FFFFFF)
- Texte blanc (#FFFFFF) sur fond bleu (#0000FF)
Les deux premiers exemples peuvent effectivement être difficiles à lire, surtout pour les personnes ayant un handicap visuel. En revanche, les deux derniers exemples ont des combinaisons de couleurs très contrastées et donc, plus faciles à lire.
Que disent les normes d’accessibilité sur les contrastes de couleurs ?
Pour répondre aux normes d’accessibilité décrites dans les WCAG, il est essentiel de comprendre ce que signifient les rapports de contraste des couleurs. Il s’agit surtout d’une valeur numérique qui représente la différence de lumière entre deux couleurs. Ce contraste est ensuite exprimé sous forme de rapport. Plus celui-ci est élevé, plus le contraste est important.
Le rapport de contraste de couleurs requis dépend de la taille du texte. Pour bien respecter le niveau AA du WCAG 2.2, les textes normaux (une taille de 14 points ou moins) doivent avoir un rapport de contraste d’au moins 4,5:1. Quant aux textes agrandis (une taille de 18 points minimum ou de 14 points en gras), ils doivent avoir un rapport de contraste de 3:1 minimum. Évidemment, plusieurs dispositifs et différentes tailles d’écran peuvent afficher les lettres dans une autre taille en raison de différences de calcul et de résolution. Aussi, d’autres éléments peuvent influencer la lisibilité de la police. Par exemple, une police fine et étroite sera moins lisible qu’une police plus large et épaisse. Il faut donc toujours être judicieux dans le choix des couleurs.
Les meilleures pratiques
Le contraste de couleurs s’applique à des éléments de conception cruciale à prendre en considération lorsque l’on vise l’accessibilité. Le contraste entre les couleurs du texte et les couleurs de l’arrière-plan affecte clairement la lisibilité du contenu. C’est pour cela que lors de la conception d’un produit (tel qu’un site Web), il est important de suivre de bonnes pratiques pour garantir l’accessibilité sans sacrifier l’esthétique.
L’idéal est de sélectionner des palettes de couleurs qui offrent suffisamment de contraste entre le texte et l’arrière-plan. Il est possible de consulter des listes de générateurs de palettes de couleurs contrastées sur différents sites, tels que Coolors et Canva. Une autre façon de s’assurer d’avoir un bon contraste de couleurs est d’utiliser des outils qui simulent diverses déficiences de vision des couleurs sur les pages Web. Il existe différentes fonctionnalités intéressantes à essayer, notamment la fonctionnalité « Émuler les déficiences visuelles » sur Google Chrome.
Finalement, un outil intéressant pour connaître directement le rapport de contraste entre la couleur d’avant-plan et la couleur d’arrière-plan est le vérificateur de contraste de couleurs de Webmain. Il suffit d’entrer le code de couleur hexadécimal pour la couleur d’avant-plan, puis celui pour la couleur d’arrière-plan, afin de vérifier si le contraste de couleurs est bon selon les règles des WCAG. La plupart des outils fournissent de la rétroaction en temps réel qui indiquent si les combinaisons de couleurs choisies répondent aux normes requises. C’est également le cas avec l’extension Chrome intitulée « WCAG Color contrast checker », qui aide à analyser les taux de contraste de couleurs d’une page Web.
Conclusion
Comprendre l’importance de l’accessibilité visuelle et du contraste des couleurs est une étape importante pour atteindre une conception inclusive. Évidemment, cela peut nécessiter des ajustements et des efforts supplémentaires, surtout si les couleurs ont déjà été choisies pour un site Web. Toutefois, l’impact sur les personnes ayant des déficiences visuelles sera considérablement accru. En s’assurant que les conceptions répondent aux normes de contraste de couleurs recommandées, il sera possible de créer des expériences accueillantes et inclusives pour un public diversifié.
Il faut surtout se rappeler que la couleur ne doit pas être le seul moyen de communiquer l’information. Alors que certaines personnes perçoivent mal les différentes couleurs, il est nécessaire d’utiliser un moyen alternatif pour diffuser l’information. L’utilisation de formes ou de symboles supplémentaires est un bon exemple. Dans le cas d’un graphique, la combinaison de couleurs avec des étiquettes peut grandement améliorer sa compréhension.
