Comment concevoir un jeu de couleurs accessible

Photo par Harry Quan sur Unsplash

C’était le jeu de couleurs du tableau de bord Web d’Envoy.

Comme beaucoup de palettes de couleurs Web, elle comprend une couleur de marque (rouge), une couleur d’information (bleu), une couleur de succès (vert), une couleur d’avertissement (orange) et diverses nuances de gris.

Même si ces couleurs semblent bien constituer une palette autonome, nous avons fini par comprendre qu’elles n’étaient pas assez souples pour répondre aux besoins de l’interface utilisateur de notre site Web. Un commentaire a été maintes fois soulevé dans les critiques de design: «Ce texte n’a pas assez de contraste.»

[Contraste faible, à gauche: la couleur du texte et celle de l'arrière-plan sont similaires, ce qui rend le texte plus difficile à lire. Si les couleurs étaient plus contrastées, les textes seraient plus faciles à lire.]

Les nuances de notre palette de couleurs existante présentaient un contraste généralement trop faible, ce qui a entraîné beaucoup de texte difficile à lire sur notre site.

J'ai décidé de changer notre palette de couleurs tout simplement parce que nous souhaitons que notre site Web soit lisible. Mais je voulais aussi concevoir un jeu de couleurs conforme aux directives d'accessibilité Web afin que notre site offre une expérience plus inclusive.

Concevoir l'accessibilité Web signifie créer intentionnellement une expérience pour tous les utilisateurs, quelles que soient leurs capacités visuelles, auditives, motrices ou cognitives. Des organisations telles que le World Wide Web Consortium (W3C) ont créé des normes d'accessibilité accessibles à tous pour créer un site Web plus inclusif.

Voici quelques raisons pour lesquelles nous avons voulu investir dans la création d’une palette de couleurs plus accessible et pourquoi vous pourriez également envisager de la créer:

  • Beaucoup de personnes ont une déficience visuelle: l'Organisation mondiale de la santé estime qu'environ 1,3 milliard de personnes dans le monde vivent avec une forme de déficience visuelle.
  • Une meilleure lisibilité aide tout le monde: la capacité de vision d’une personne n’est pas le seul facteur à prendre en compte; Pensez aux différents types d'ordinateurs et de périphériques avec différents niveaux de résolution et de luminosité pour accéder à votre site Web. Plus facile à lire signifie plus facile pour tout le monde.
  • Les directives d’aujourd’hui pourraient être les exigences de demain: les poursuites en matière d’accessibilité sont en augmentation. Suivre les directives existantes pourrait réduire la responsabilité de l'entreprise.
  • Empathie pour les utilisateurs: en tant que designer, vous avez le pouvoir de mettre en valeur le monde. Utilisez vos super-pouvoirs d’empathie pour concevoir un plus grand nombre de personnes, car vous les tenez à cœur.

Je me suis mis en route pour créer un nouveau jeu de couleurs avec des couleurs plus contrastées et plus accessibles. Il a fallu un certain temps et pensé pour bien faire les choses, alors je souhaite partager mon processus avec vous afin que davantage de concepteurs puissent relever le défi de la conception de jeux de couleurs accessibles.

Mais d’abord, quelles sont exactement les couleurs accessibles?

La directive de base en matière d’accessibilité pour les couleurs consiste à choisir les couleurs que les gens peuvent voir. Être capable de voir un texte est un facteur important pour pouvoir le lire et donc comprendre son sens.

Alors, comment savoir quelles couleurs les gens peuvent voir? Tout est une question de contraste qui, comme je l’ai mentionné brièvement plus tôt, consiste à comparer la couleur de premier plan à la couleur d’arrière-plan.

Dans l'exemple ci-dessous, vous pouvez voir que le texte à gauche est très similaire à la couleur d'arrière-plan (contraste faible), mais que le texte à droite est différent de la couleur d'arrière-plan (contraste élevé) et est beaucoup plus facile à lire.

Les directives pour l'accessibilité au contenu Web (WCAG) développées par le W3C fournissent une formule permettant de calculer la quantité de contraste entre deux couleurs, ce qui donne un rapport de contraste.

Les rapports de contraste vont de 1: 1 (il n'y a pas de différence entre les couleurs) à 21: 1 (la différence la plus élevée possible). Ils sont faciles à calculer avec de nombreux outils gratuits: l’équipe d’Envoy aime Tanaguru, Contrast et le plugin Stark Sketch.

Les WCAG définissent également la quantité de contraste nécessaire pour que le texte soit lisible:

Niveau AA: la norme minimale
Le petit texte doit avoir un rapport de contraste de 4,5: 1 ou plus
Le texte large doit être 3: 1 ou plus

Niveau AAA: la norme améliorée
Le petit texte doit être 7: 1 ou plus
Le texte large devrait être 4.5: 1 ou plus

Remarque: votre texte est qualifié de «grand» s'il n'est pas gras et de 18 points (24 pixels) ou plus, ou s'il est gras et de 14 points (~ 19 pixels) ou plus; sinon, il s’agit d’un «petit» texte. Le W3C définit un point comme 1 / 72ème de pouce et un pixel comme 1 / 96ème de pouce. Pour convertir des pixels en points, multipliez la valeur du pixel par 0,75.

Comment j'ai construit un jeu de couleurs plus accessible

Maintenant que nous sommes tous sur la même longueur d'onde en ce qui concerne les normes et la raison pour laquelle nous voulons les respecter, laissez-moi vous raconter comment j'ai fait en sorte que cela se produise.

Calculez les rapports de contraste de toutes vos couleurs existantes

Utilisez les outils pratiques que j'ai mentionnés ci-dessus (Tanaguru, Contrast, Stark) pour tester chaque couleur de votre jeu de couleurs existant sur le fond de votre site Web.

J'ai constaté qu'aucune de nos couleurs vives ne respectait la norme 4.5: 1 pour le texte, même si nous les utilisions pour le texte sur l'ensemble de notre site Web. Nous utilisions également des gris plus clairs pour le texte. Je savais donc que je devais ajuster nos couleurs et nos gris.

Choisir les gris

J'ai inventorié les endroits où nous avons utilisé du texte en gris sur le site Web et constaté que nous avions les cas d'utilisation suivants:

  • Texte du paragraphe principal, généralement dans la nuance de gris la plus sombre
  • Texte secondaire ou sous-en-têtes, généralement dans la deuxième nuance de gris la plus sombre
  • Texte et espaces réservés désactivés, généralement dans la troisième nuance de gris la plus sombre
En-têtes primaires, informations “hôte” secondaires, état tertiaire nul

Ce modèle 1/2/3 est assez répandu sur le Web. Il est donc également un endroit sûr pour commencer si vous créez une palette à partir de rien.

Tester différentes nuances de gris en réduisant l'opacité

Alors maintenant, je savais qu'il me fallait trois nuances de gris d'aspect suffisamment différentes pour suggérer un statut primaire, secondaire ou tertiaire, et qui répondraient également aux normes d'accessibilité.

Calcul du rapport de contraste à l'aide du plugin Stark Sketch

En utilisant Sketch, j'ai dessiné quelques carrés remplis de ma couleur la plus sombre. J'ai diminué l'opacité de l'un des carrés de 50% et j'ai utilisé le compte-gouttes pour trouver le code hexadécimal d'une couleur approximative unie. (Vous pouvez utiliser l'opacité uniquement pour créer différentes couleurs sur le Web, mais j’ai constaté que les couleurs unies sont plus flexibles car elles peuvent être appliquées de manière fiable à tous types d’outils de conception et de projets.)

Ensuite, j'ai calculé le rapport de contraste de cette nuance plus claire en utilisant le plugin Stark. J'ai choisi 50% au hasard, mais il s'est avéré que le contraste était précisément de 3: 1 par rapport à un fond blanc. J'ai donc pris cela comme limite inférieure: ce serait la nuance de gris la plus claire que nous utiliserons pour le texte sur notre site Web. Il respecte les normes de niveau AA pour les textes de grande taille, et il sera acceptable de l'utiliser pour les espaces réservés de champs de formulaire et autres textes subtils.

Alors maintenant, je devais trouver une valeur comprise entre 100% et 50% de ma couleur la plus sombre pour mon texte secondaire. 75% se sentaient bien à cause des pas de 25%, mais après avoir essayé différentes nuances, je suis tombé sur 65%, car il venait tout juste de respecter le seuil de 4,5: 1 du contraste.

Ce processus prend un certain temps, mais continuez à calculer le contraste jusqu'à ce que vous trouviez la valeur de couleur précise qui correspondra au rapport que vous visez.

Une fois que j'ai eu trois nuances de gris pour le texte, j'ai utilisé le même processus pour définir quelques nuances supplémentaires pour les icônes, les bordures et les couleurs d'arrière-plan (mais pas pour le texte!).

Choisir les couleurs vives

Je vais être honnête: les gris étaient beaucoup plus faciles. Choisir une couleur de base «noire» et changer l'opacité pour trouver de nouvelles valeurs est assez simple. Mais quand il s'agit de choisir des couleurs d'accent, vous pouvez choisir n'importe quoi, ce qui vous laisse beaucoup de rapports de contraste à calculer.

J'ai utilisé nos couleurs existantes comme point de départ, car elles avaient un but. La couleur de notre marque n’allait pas changer et nos autres couleurs appartenaient aux familles de couleurs couramment utilisées pour les états Web: bleu pour l’information, vert pour le succès et orange pour l’avertissement.

Si votre esquisse indique RVB, cliquez sur l'étiquette RVB pour passer en mode TSL.

J'ai commencé avec une couleur de base que j'aimais pour chaque famille de couleurs, puis j'ai ajusté les valeurs de saturation et de luminosité pour créer des couleurs avec la même teinte mais avec des niveaux de contraste différents.

Encore une fois, il a fallu des tonnes d’essais pour découvrir des couleurs qui me plaisaient et qui respectaient également les seuils de contraste. La palette colorée était beaucoup plus subjective; J'ai eu besoin d'ajuster légèrement la teinte pour que les différentes nuances me semblent «correctes».

J'ai fini par créer trois nuances de bleu et de vert pouvant être utilisées pour le texte à différents seuils de rapport de contraste.

L’orange était dure, car l’orange devenait marron assez rapidement quand on la rendait plus sombre, nous avons donc décidé de ne respecter que la barre avec le rapport de contraste le plus faible avec une belle nuance de moutarde et de l’utiliser avec parcimonie.

Je n’ai pas modifié la couleur de notre marque de base, mais j’ai créé deux versions plus sombres que nous pouvons utiliser pour le texte.

J'ai marqué certaines nuances vibrantes à faible contraste pour n'être utilisées que comme couleurs «d'accentuation» pour des icônes ou des décorations sans texte.

Et enfin, j'ai créé des nuances très pâles de chaque couleur, à utiliser comme couleurs de fond le cas échéant.

Envelopper le tout

Nous nous sommes retrouvés avec une palette de couleurs complète qui nous permet maintenant de respecter les directives en matière d'accessibilité et offre de nombreuses options pour tous nos besoins en texte et en interface utilisateur.

Nous avons soigneusement déployé les nouvelles couleurs dans notre CSS et sommes satisfaits des résultats obtenus et de la lisibilité améliorée jusqu'à présent.

Avant et après

Tout au long du processus, il y a eu beaucoup d'essais et d'erreurs, mais les résultats nous permettent de créer un site Web plus visible, lisible et accessible pour tous nos utilisateurs.

Quels sont les conseils et astuces dont vous disposez pour créer la palette de couleurs de votre site Web? Sur quels projets liés à l'accessibilité avez-vous travaillé? Partagez-les avec moi ci-dessous!

Merci d'avoir lu! Assurez-vous de visiter envoy.design et inscrivez-vous pour être averti lorsque nous publions quelque chose de nouveau. Ou consultez mes précédentes procédures: comment poser de bonnes questions et améliorer vos compétences en matière de recherche d'utilisateurs