Blog
de Mat Janson Blanchet

Introduction aux couleurs et aux contrastes accessibles dans un contexte de production numérique

Publié le 10 février 2021

Transcription

Salut YouTube ! Si vous êtes ici, c’est que vous avez un intérêt pour les couleurs, plus précisément, c’est que vous êtes probablement curieux à savoir en quoi les couleurs peuvent affecter l’accessibilité des produits et des expériences numériques.

Mon nom est Mat Janson Blanchet, et à travers de courtes capsules, je vais présenter différentes approches pour concevoir des expériences numériques accessibles et respectueuses de ses utilisateurs. Ces capsules s’adressent tout d’abord aux gens qui ne sont pas des spécialistes d’accessibilité. Je cherche à vulgariser ce sujet pour les gestionnaires de projets, les designers, et les développeurs.

1. Définitions

1.1 L’expérience utilisateur

Afin qu’on puisse avoir un point de référence, je vais définir quelques termes avant de commencer.

Tout d’abord, l’expérience utilisateur, ou son acronyme UX.

Je vais donner ici une définition très large : quand je parlerai de UX, je veux dire l’expérience vécue et perçue avant, pendant, et après l’interaction avec une marque et ses produits.

Évidemment, dans les discussions informelles que nous avons, on veut plus souvent dire l’expérience vécue lors de l’interaction avec une interface, mais gardez en tête que UX signifie plus que juste ça.

1.2 L’accessibilité

Quand on parle d’accessibilité, on fait référence à l’accessibilité d’un système, d’une interface, d’un produit, etc. pour toutes les personnes, quel que soit le type ou la gravité de leur handicap.

Selon l’Organisation Mondiale de la Santé (OMS),

Le handicap n’est pas seulement un problème de santé. C’est un phénomène complexe, qui reflète l’interaction entre les caractéristiques du corps d’une personne et les caractéristiques de la société dans laquelle elle vit.

Ainsi, le handicap est donc designé. C’est un choix délibéré de la part des designers de ne pas investir le temps ou l’effort pour rendre leur produit accessible à tous.

À noter que quand je parle de designer, je ne veux pas simplement dire les designers graphiques. Toute personne qui peut affecter la production d’un produit, que ce soit un gestionnaire de projet qui coupe le budget, ou un développeur qui n’intègre pas une fonctionalité, fait partie de la conception du produit, et porte donc sur ses épaules la même responsabilité morale que les designers UX et graphiques.

2. Les couleurs

Sautons maintenant dans le vif du sujet.

Pour ceux qui peuvent les voir, les couleurs sont une perception visuelle d’une partie des ondes électro-magnétiques de la lumière.

Si je peux me permettre un petit aparté, c’est d’ailleurs grâce aux différences de longueur des ondes en question qu’Edwin Hubble, oui celui du téléscope, a pu découvrir que l’univers était en expansion.

Revenons à nos couleurs.

La majorité des humains qui voient percoivent donc les couleurs.

Dans l’univers du numérique, les couleurs sont créées de façon additives, c’est-à dire en émettant différentes quantité de rouge, vert et bleu. Ceci explique donc l’appellation RVB en français, et RGB en anglais, pour red, green, blue.

Dans le contexte imprimé, on parle de couleurs subtractives puisqu’on calcule quelles couleurs absorbent ou reflètent la lumières lorsque regardée sur une surface.

Sur le web, et dans plusieurs contextes numériques, on utilise ce qu’on appelle les couleurs hexadécimales. Je m’explique :

Pourquoi suis-je passé des couleurs aux mathématiques d’un coup comme ça?

Et bien parce que dans le contexte d’une couleur présentée à l’écran, on la codifie comme ceci :

FF0000

Pouvez-vous identifier cette couleur simplement en regardant ce code ?

Il s’agit du rouge !

Décorticons cette valeur :

rouge   vert    bleu
ff      00      00

Comme je l’ai mentionné, on utilise des chiffres hexadécimaux, et on cumule les valeurs de chaque couleur pour obtenir un résultat.

On peut utiliser 256 différentes valeurs pour chaque couleur. Puisqu’on compte à partir de 0, le maximum sera de 255 en chiffre décimal. Puisqu’on compte en chiffre hexadécimal, chaque couleur peut donc avoir un maximum de « ff ».

Ainsi :

On obtient du rouge à l’écran.

2.1 Couleurs et expérience utilisateur

Les couleurs d’une marque peuvent affecter le UX de ses produits. Par exemple, il semblerait qu’en chinois, l’expression “porter un chapeau vert” ressemblerait phonétiquement à l’expression “cocu”. Dans un tel cas, le chapeau vert de Luigi pourrait être mal interprété…

Puisqu’elles ont de potentielles significations sémantiques, culturelles ou émotives, les couleurs peuvent donc affecter l’interaction d’un utilisateur avec une interface. Dans le cas actuel, je ne vais pas investiguer la signification des couleurs, mais bien leur impact visuel.

3. Guides de style de marque

Lorsqu’un designer graphique crée ou adapte une image de marque, il est une bonne pratique de choisir les différentes couleurs de la marque, et de les documenter dans ce qui est appelé un guide de style de marque, ou un brand styleguide en anglais.

Ce document sert habituellement à identifer le logo, le ton à utiliser quand des textes doivent être publiés au nom de la marque, et plusieurs choses, dont de quelle façon les couleurs doivent être utilisées.

C’est à cet endroit que les designers graphiques sont responsables de déclarer quelles sont les combinaisons de couleurs qui sont acceptables pour que les créations de la marque soient accessibles.

Mais comment savoir si des couleurs sont accessibles ?

Une couleur par elle-même n’est que rarement inaccessible. On parlerait dans ce cas de certaines couleurs pour certaines types de daltonisme. Je reviendrai probablement sur ce sujet dans une autre capsule.

Donc il faut regarder les combinaisons de couleurs et s’assurer que leur contraste soit assez grand pour que la combinaison de couleurs soit accessible.

4. Les couleurs, le contraste et WCAG

Le contraste, en gros, c’est la différence de luminance entre deux couleurs.

Puisque la physique de la lumière n’est pas mon domaine, comment est-ce que je vais pouvoir vous conseiller pour calculer cette différences.

Nous allons donc nous fier aux WCAG pour vérifier si le contraste entre deux couleurs est suffisant.

L’acronyme WCAG signifie Web Content Accessibility Guidelines, ou en traduction libre, les Directives sur l’accessibilité du contenu sur le web.

Ces directives sont publiées par la Web Accessibility Initiative du World Wide Web Consortium, la principale organisation internationale de standardisation de l’Internet

Ces directives présentent quelques points principaux concernant les couleurs:

Je reviendrai sur ce deuxième point dans une autre capsule.

Alors, que signifie un contraste suffisant ?

Pour le niveau AA, WCAG v2.0 indique qu’il faut un contraste d’au moins 4.5:1 pour du texte de corps, et 3:1 pour du gros texte. Les ratios deviennent plus stricts si on augmente au niveau AAA, et peuvent différer un peu si on compare des éléments graphiques d’interface ou du texte.

5. Des outils pour valider le contraste

Comment s’y retrouver dans tout ça ? On pourrait penser qu’il nous faille lire toute la documentation du WCAG, mais en fait, il y a des solutions plus pratiques.

Le WebAIM, qui est une organisation sans but lucratif basée au Utah State University, offre le Contrast Checker, un outil pour comparer deux couleurs hexadécimales.

Cet outil est bien, mais permet seulement de comparer deux couleurs à la fois. Lorsque les designers graphiques créent le guide de style de marque, ils doivent comparer plusieurs couleurs à la fois. Pour les aider, j’ai créé le Color Contrast Matrix, un outil qui fonctionne comme le Contrast Checker, mais qui permet de comparer plusieurs couleurs à la fois :

L’idée derrière cet outil est que si on facilite l’expérience des designers quand ils utilisent des outils pour intégrer l’accessibilité, on a plus de chances que ça devienne une habitude.

Les liens que j’ai mentionnés et qui paraissaient au bas de la vidéo seront également disponibles dans la transcription du texte de cette vidéo.

6. Conclusion

Évidemment, le contraste ne s’applique pas uniquement aux couleurs. L’épaisseur des traits d’un ligne, l’apparence des glyphes d’une police de caractères, les mouvements à l’écran ; tout ça peut affecter le contraste ou sa perception.

Lors d’une entrevue, Hubert Florin, quand il était designer chez Slack, se demandait :

S’il est acceptable que certaines personnes ne voient pas une partie de votre site ou de votre design, alors pourquoi cet élément de design est-il là en premier lieu ?

En conclusion, si vous concevez des produits numériques comme des sites web, des applis mobiles, et des jeux vidéos, assurez-vous que les éléments avec lesquels vos utilisateurs doivent interagir aient au moins un contraste de couleurs suffisant.

Si vous avez apprécié cette capsule, je vous invite à me soutenir en vous abonnant à ma chaîne YouTube, ou en me suivant sur Twitter. Comme produire des vidéos de qualité prend du temps et des resources, vous pouvez également me soutenir financièrement en devenant mes commanditaires sur Patreon, ou en faisant un don.

Tous les liens mentionnés dans cette capsule sont disponibles dans la description et la retranscription.

Merci de m’avoir regardé et écouté, j’espère que les couleurs que vous utiliserez dans vos prochaines créations numériques seront accessibles.

Je vous retrouve pour une prochaine capsule, ciao !

Traduction des sous-titres

Si vous souhaitez contribuer à la traduction des sous-titres, le dépôt GitHub du projet contient les versions originales en français.

Références

Lectures et références additionnelles

Remerciements

Merci à Nicolas Steenhout, à Daniel Fontaine et à Suzanne Blanchet pour leurs conseils et suggestions.

Mis à jour le 20 novembre 2023

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *