Récemment, on m’a demandé d’auditer l’expérience utilisateur d’un site éditorial. Ce site regroupait ses articles en catégories et les affichait dans un menu horizontal, de façon assez classique.

La première chose que j’ai remarquée, c’est ce menu avec les catégories composé d’une liste de boutons aux couleurs vives. J’ai donc analysé les contrastes et la perception pour les daltoniens. Je vous présente aujourd’hui mes observations concernant les contrastes avec des maquettes anonymisées. Je présente dans un autre article (voici le lien) la manière de voir le menu selon le type de daltonisme et les difficultés engendrées.

Présentation du site

Le site que j’ai audité répertorie des articles. Ceux-ci sont regroupés en catégories qui sont présentées dans le menu. Certaines catégories regroupent des sous-catégories, non accessibles directement dans le menu.

Sur les maquettes simplifiées ci-dessous, je vous ai d’abord mis le Hero de la page. On a le titre et le logo du site écrits sur fond blanc puis le menu avec 9 cases colorées sur un bandeau gris.

J’ai remplacé les catégories et le titre du site pour anonymiser.

Sur la page d’accueil, sous le menu, les articles présentés ont une étiquette reprenant la couleur de leur catégorie. Mais le texte de l’étiquette affiche soit la sous-catégorie, soit la catégorie, selon le cas.

Donc, quand il n’y a que la sous-catégorie affichée dans cette étiquette, ceux qui ne voient pas la couleur peuvent avoir des difficultés pour savoir dans quelle catégorie se situe l’article en question.

A première vue, on peut se dire que la catégorisation par couleur peut aider les utilisateurs à scroller plus vite la page, mémoriser les couleurs qui les intéressent pour une navigation ultérieure, par exemple.

Pourtant, le choix de catégoriser par couleur limite la navigation pour les utilisateurs qui ne voient pas les contrastes faibles et pour les daltoniens. Au total, environ 6% de la population peut être impactée et mal voir ou ne pas comprendre cette navigation.

Même les personnes qui voient toutes les couleurs peuvent être embêtées par ce choix car plusieurs couleurs sont proches (titres 3 et 5 ; titres 5 et 6 ; titres 3 et 7).

Contraste entre le texte et le fond des boutons

Pour savoir si les contrastes sont suffisants, j’ai regardé les recommandations de ratio de contraste du WCAG. Voici ce qui est demandé : 

• un ratio d’au moins 4,5:1 pour les textes de moins de 18 points et de moins de 14 points s’ils sont en gras.
• un ratio d’au moins 3:1 pour les textes de plus de 18 points et de moins 14 points s’ils sont gras.

Dans l’exemple présenté, voici les ratios trop faibles entre le texte et le bouton (inférieurs à 3:1) : 

• le ratio entre le titre 2 et le bouton bleu est de 2,79
• le ratio entre le titre 3 et le bouton marron clair est de 2,36
• le ratio entre le titre 5 et le bouton vert-jaune est de 2,15
• le ratio entre le titre 6 et le bouton vert est de 2,25
• le ratio entre le titre 7 et le bouton orange est de 2,33
• le ratio entre le titre 9 et le bouton rose est de 2,31.

Pour les ⅔ des couleurs choisies, le contraste est insuffisant entre le texte et la couleur de fond du bouton. Ce choix de couleur peut limiter la visibilité pour des personnes ayant des problèmes de vue ou un daltonisme.

Contraste entre la couleur du bouton et l’arrière-plan

Nous allons maintenant regarder les contrastes entre la couleur choisie pour chaque bouton et le fond du menu qui est gris.

Pour le choix de la couleur par rapport au fond gris, les contrastes sont insuffisants pour : 

• le titre 2 : le ratio entre le bouton bleu et le fond est de 1,97
• le titre 3 : le ratio entre le bouton marron clair et le fond est de 1,68
• le titre 5 : le ratio entre le bouton vert-jaune et le fond est de 1,52
• le titre 6 : le ratio entre le bouton vert et le fond est de 1,60
• le titre 7 : le ratio entre le bouton orange et le fond est de 1,65
• le titre 9 : le ratio entre le bouton rose et le fond est de 1,63.

Ce sont les mêmes couleurs que précédemment qui ont un ratio de contraste insuffisant.

Dans le prochain article, je vous montrerai ce menu en niveau de gris. Ce qui nous aidera à mieux comprendre l’importance du contraste.

Recommandations

Ces problèmes de contraste empêchent certains utilisateurs de distinguer les catégories et de voir les zones cliquables aisément donc ils ne permettent pas de naviguer correctement sur le site. Il est important d’étudier les contrastes avant de choisir les couleurs de votre site.

Pour ce site, mes recommandations étaient de modifier ce menu pour ne pas véhiculer les informations de catégorisation par la couleur uniquement, et de permettre d’accéder aux sous-catégories via le menu.

Pour aider à la navigation, il était possible de partir sur un menu déroulant, ou de maintenir les 9 titres sur le menu avec tous les boutons de la même couleur, ou de modifier la couleur des boutons pour améliorer les ratios (si l’on souhaite conserver des couleurs, sans qu’elles indiquent seules les informations de catégorisation).

Dans l’exemple ci-dessous, voici une maquette permettant de conserver les couleurs : les cases sont blanches et l’écriture est gris foncé. Chaque case a une bordure colorée. J’ai repris les anciennes couleurs quand le contraste était bon, et j’ai foncé les couleurs lorsque c’était nécessaire. Il faut que ces boutons soient des menus déroulants pour présenter les sous-catégories lorsqu’il y en a. Dans la suite de la page, il faudrait nommer la catégorie et la sous-catégorie de chaque article présenté pour permettre de savoir où est classé l’article et pour permettre d’accéder à ces catégories et sous-catégories.

Pour un simple filtre de catégories comme pour ce projet, on peut aussi utiliser un menu déroulant. Cette fois-ci la maquette de menu est présentée en noir, blanc et niveaux de gris. Il peut être coloré, avec des couleurs qui ne donnent pas d’informations et ayant un fort contraste. On peut notamment ajouter de la couleur au niveau du titre, sur le fond, à la place de la bande grise, dans le bouton, tout en respectant les ratios de contraste.

Ce menu permet de choisir une catégorie, ou une sous-catégorie après avoir cliqué sur la flèche correspondante.

Conclusion

L’exemple que je vous ai présenté aide à réfléchir aux difficultés engendrées par l’utilisation de couleurs pour catégoriser et lorsque les ratios de contraste sont trop faibles.

Si les utilisateurs ont des difficultés à naviguer sur votre site, ils ne peuvent pas profiter de votre contenu. C’est probable qu’ils aillent chercher les informations ailleurs. Pour être concurrentiel, il faut que votre site soit adapté à vos utilisateurs pour en exclure le moins possible.

C’est pour ça qu’il est indispensable de soigner votre identité visuelle et vous assurer qu’elle est accessible. Parfois il est nécessaire de refaire son identité visuelle ou de demander des conseils à un UX Designer pour choisir ses couleurs et la manière de gérer la navigation.

Dans cet autre article, je vous montre la vision selon le type de daltonisme et vous verrez que certains boutons ont une couleur proche du fond, et ne se différencient pas suffisamment. Ce qui gêne à la lisibilité du menu et pour la zone à cliquer du bouton.

Vous souhaitez faire un audit UX de votre site pour améliorer la navigation ou des conseils pour la création de votre site, n’hésitez pas à me contacter !