Le premier principe d'accessibilité du contenu dans les Web Content Accessible Guidelines est que le contenu doit être perceptible. Après tout, vous ne pourrez pas accéder à l'information ou à la fonctionnalité si vous ne savez pas qu'elle est là ! Et apparemment, le moyen le plus efficace de s'assurer que les utilisateurs ne pourront pas distinguer votre contenu est de le définir dans une couleur qui ne se démarque pas de son arrière-plan — en d'autres termes, d'avoir un faible contraste de couleur.

Nous pouvons tous rencontrer un problème lié à un contraste insuffisant, pour diverses raisons — par exemple à cause du reflet du soleil sur notre écran — mais le contraste insuffisant d'un texte a un impact démesuré sur les utilisateurs malvoyants tels que ceux qui ont des problèmes de vision ou qui sont daltoniens. Et pourtant, le texte à faible contraste est partout. Le rapport WebAIM Million pour 2022 a révélé que près de 84 % des 1 million de pages d'accueil les plus populaires avaient au moins une violation de contraste insuffisant, avec une moyenne de 31,6 instances distinctes de texte faiblement contrasté par page d'accueil. Un rapport de 2021 de Deque Systems (PDF) a révélé que le texte à faible contraste représentait 30 % des défauts d'accessibilité automatiquement détectables, ce qui en fait de loin le défaut d'accessibilité le plus courant.

Corriger l'insuffisance de contraste pourrait grandement contribuer à rendre le Web plus utilisable. Nous allons voir comment mesurer le contraste, corriger facilement un faible contraste et assurer un contraste suffisant dans nos sites à l'avenir.

Obtenez un ratio

Le plus simple pour commencer est d'utiliser un contrôleur de contraste de couleur. Des outils tels que WebAIM Contrast Checker prennent une paire de couleurs que vous leur donnez et vous retournent un rapport de contraste. En attendant, si vous avez déjà déployé votre site et vos couleurs en direct pour le monde, vous pouvez utiliser des outils d'analyse d'accessibilité pleine page tels que l'extension ax DevTools, et ils effectueront des opérations de contraste des couleurs pour chaque bit de texte et d'arrière-plan sur votre page et identifieront les éléments spécifiques de votre page dont le contraste est insuffisant. Dans tous les cas, vous obtiendrez un rapport de contraste des couleurs.

Ces ratios prennent le format <un certain nombre>:1, allant de 1:1 (pas de contraste — vous avez comparé une couleur à elle-même) à 21:1 (contraste maximum, uniquement obtenu en comparant le noir et blanc). Plus le premier chiffre est élevé, plus il y a de contraste entre les deux couleurs.

Ce rapport n'est pas vraiment un score de la différence entre les deux couleurs, mais plutôt un score de la façon dont une couleur serait perceptible par dessus l'autre. Par exemple, en tant que personne non daltonienne, les couleurs CSS tomato #ff6347 et cornflowerblue #6495ed me semblent très différentes :

Et pourtant, la tomate et le bleuet ont ensemble un très mauvais rapport de contraste des couleurs : seulement environ 1,009:1. C'est à peine mieux que la comparaison de n'importe quelle couleur avec elle-même ! Si nous empilons ces couleurs l'une sur l'autre (avec nos excuses anticipées !), nous pouvons voir qu'ensemble elles sont difficiles, voire carrément douloureuses, à lire :

Les algorithmes de contraste de couleurs actuelllement disponibles pour obtenir ces rapports n'essaient pas de nous donner la différence mathématique pure entre deux couleurs, mais décrivent plutôt une différence plus subjective entre les deux couleurs, basée sur la perception humaine. Plus précisément, ils comparent la luminance relative des deux couleurs, ce qui revient essentiellement à savoir si une couleur est plus claire ou plus lumineuse que l'autre. Ici, la tomate et le bleuet sont à peu près aussi brillants, c'est pourquoi ils sont difficiles à lire ensemble.

Utilisation des ratios

Maintenant que nous avons une idée de la façon dont on mesure le contraste entre deux couleurs, comment savons-nous quand le contraste est suffisant ?

Dans le critère de réussite 1.4.3 des directives pour l'accessibilité des contenus Web, le World Wide Web Consortium définit deux points de repère clés dont nous devons nous souvenir :

• La plupart des textes ont besoin d'un rapport d'au moins 4,5:1 par rapport à leur arrière-plan.
• Les règles pour les textes plus volumineux sont un peu plus souples — un texte volumineux n'a besoin que de respecter un rapport de 3:1 par rapport à son arrière-plan.

Comment améliorer votre score

Vous avez donc mesuré votre texte et déterminé qu'il ne répond pas aux exigences de contraste des couleurs. Que pouvez-vous faire pour régler la situation sans chambouler votre design ?

En règle générale, j'aborde la correction du contraste des couleurs de deux manières différentes, au cas par cas :

• Choisir des couleurs plus claires et plus foncées
• Agrandir le texte

Passez du côté Clair/Obscur

Votre approche principale pour résoudre les problèmes de contraste des couleurs consistera à modifier les couleurs sous-jacentes elles-mêmes.

En général cependant, vous vous retrouverez limité dans ce que vous pouvez faire si vous abordez le problème en modifiant les teintes des couleurs. D'une part, les guides de style des marques ou des sites ont généralement des palettes de couleurs assez strictes, et le changement de teintes créera souvent des couleurs qui s'en écartent. D'autre part, comme l'a montré l'exemple précédent de tomate et bleuet, les teintes des couleurs ont souvent un impact très minime sur le rapport entre ces deux couleurs, surtout si ces couleurs ont des luminosités très similaires.

Au lieu de cela, il me semble que rendre une couleur plus claire et/ou l'autre couleur plus foncée a un impact plus profond sur le contraste, tout en restant plus cohérent avec le reste des composantes du design et plus proche de la sensibilité générale du site.

L'agrandissement est parfaitement acceptable

Un texte plus grand et plus épais a tendance à être beaucoup plus facile à lire, même sur des arrière-plans à faible contraste, qu'un texte plus petit et plus fin. Par exemple, dans l'exemple suivant, les deux lignes de texte sont de la même couleur, mais si vous arrivez à discerner le texte, il sera plus facile d'en distinguer la première ligne, dont les caractères sont plus grands et plus gras :

C'est à cause de cette différence que le WCAG est un peu plus indulgent pour le texte volumineux, qu'il définit comme un texte d'au moins 18 pt ou, alternativement, comme un texte en gras et d'au moins 14 pt. N'oubliez pas que pt est une unité de taille de police définie par le navigateur de l'utilisateur (un peu comme rem) — ce qui signifie, dans les paramètres par défaut de la plupart des navigateurs, que le seuil est d'environ 24 pixels, ou à la fois "en gras et d'environ 19 pixels". Le texte qui répond à ce critère de dimensionnement n'a besoin que d'un rapport de 3:1 par rapport à son arrière-plan, selon le WCAG.

Vous pourrez parfois utiliser ce seuil plus indulgent à votre avantage, car au lieu de devoir choisir différentes couleurs, vous pourrez peut-être augmenter la taille ou le poids de votre police. Si vous utilisez uniquement cette approche pour atteindre vos seuils minimaux, ce correctif ayant tendance à être très contextuel ne s'appliquera probablement qu'à des éléments tels que les titres. Cependant, l'accessibilité ne consiste pas seulement à atteindre des seuils. Le WCAG est la barre minimale à franchir, mais une fois que vous avez franchi ces seuils minimaux, vous pouvez utiliser des tactiques telles que l'augmentation de la taille de la police, l'augmentation du poids de la police ou le choix d'une police de caractères plus épaisse pour offrir une expérience plus lisible, même s'ils n'améliorent pas votre score de contraste.

Construire des approches systémiques pour assurer le contraste des couleurs

Ces approches fonctionnent bien pour ajouter des couleurs uniques à une page ou pour corriger un texte à faible contraste mis en évidence par un audit, mais ce n'est pas très durable pour les grands sites ou organisations.

De nombreuses organisations se tournent vers les systèmes de design pour communiquer leurs pratiques UI et UX, y compris leurs palettes de couleurs, ainsi que leurs connaissances institutionnelles sur le moment et la manière dont chaque couleur desdites palettes doit être utilisée. Ces systèmes de design sont un excellent endroit pour coder les connaissances sur les appariements de couleurs acceptables. Par exemple, un système de design peut déterminer des couleurs d'arrière-plan et des couleurs de texte acceptables pour les boutons, et ces couleurs auront certainement été choisies en fonction de rapports de contraste acceptables. Les designers et les développeurs peuvent tirer parti de ces décisions sans même avoir vraiment besoin du contexte d'arrière-plan complet de la façon dont ces couleurs ont été choisies — il y a un puits de succès large et facile.

👉🏽 NdT : comme rappelé dans l'article en lien ci-dessus, notre objectif n'est pas que l'utilisateur remporte une brillante victoire au terme de multiples épreuves et surprises, mais qu'il tombe simplement dans des pratiques gagnantes en utilisant notre plateforme et nos frameworks. Faciliter les ennuis, c'est courir à l'échec.

J'ai également entendu parler de systèmes de design qui deviennent encore plus explicites dans la façon dont ils communiquent des associations de couleurs accessibles. Une astuce que j'ai apprise de Mike Aparicio réside dans la façon dont il nomme les nuances du coloris d'un système de design. Dans ses systèmes de design, chaque nuance d'une couleur reçoit un nombre de 100 à 900, où 100 est la nuance la plus claire, 600 est la nuance "de base", 900 est la nuance la plus foncée et les autres couleurs sont remplies entre les deux comme de besoin. Ses échelles de couleurs sont calculées de manière à ce que les couleurs "200" et plus claires soient toujours suffisamment claires pour contraster avec la teinte de base "600". Cette règle est assez facile à retenir pour les designers et les développeurs, ce qui garantit qu'ils sont beaucoup plus susceptibles de choisir des appariements acceptables. Vous pouvez l'entendre parler de cette approche sur Frontend Horse et dans ma propre émission Some Antics.

Encore quelques éléments à garder en tête à propos du contraste

Les systèmes de rapport de contraste actuels sont assez soigneusement vérifiés, mais il y a quelques limitations, dont les suivantes :

• Les algorithmes actuels ne prennent pas en compte la question de savoir quelle couleur est au premier plan et laquelle est en arrière-plan, même si dans certaines paires de couleurs telles que le marron et le rose, une couleur est définitivement plus appropriée comme premier plan et non comme arrière-plan.
• Le gras de certaines polices de caractères n'est pas toujours très gras, ce qui signifie que vous pouvez répondre à la lettre de l'exigence de texte en gras sans en respecter l'esprit.

Une future version des Directives pour l'accessibilité du contenu Web peut utiliser un algorithme de contraste de couleur différent qui utilise plus de facteurs tels que ceux-ci, mais cela nécessite encore plus de vérification. Si vous rencontrez certaines de ces limitations dans votre design et si vous pensez que votre design est techniquement conforme, je vous encourage à faire des tests utilisateur si possible, de préférence avec des utilisateurs malvoyants, pour vérifier si votre contenu est ou non lisible pour de vrais gens.

De plus, la couleur peut être une chose difficile à équilibrer ! Si vous avez du mal à distinguer différents contenus avec des couleurs, envisagez de vous appuyer sur d'autres leviers et d'utiliser des outils tels que des icônes ou différentes tailles de police pour faire passer votre message ! Cela garantit que vous ne comptez pas uniquement sur la couleur pour transmettre du sens, et la création de moyens redondants pour intégrer des informations dans votre design conduira presque toujours à une expérience plus accessible.

Points à retenir en conclusion

Les problèmes de contraste des couleurs sont partout, et les éliminer réduirait considérablement les barrières d'accès sur le Web. Au cas par cas, je trouve plus simple de corriger un faible insuffisant en ajustant la luminosité ou l'obscurité des couleurs, plutôt que leur teinte ou leur saturation. Dans certains cas (notamment les textes proéminents tels que les titres), vous pourrez peut-être tirer parti de la taille et de l'épaisseur de la police. À l'avenir, le contraste devrait être traité de manière systémique, typiquement par le biais de systèmes de design codifiés et, idéalement, contrôlé par des tests utilisateurs.