Utiliser la couleur dans un design

Environ 8 % des hommes ont une déficience de la vision des couleurs rouge-vert : un formulaire qui ne marque les erreurs qu'en rouge en laisse beaucoup dans le doute.

Ne laisse jamais la couleur porter seule le message

Le critère de succès WCAG 2.2 1.4.1, Utilisation de la couleur, est de niveau A, le plus basique. Il dit que la couleur ne doit pas être le seul moyen visuel de transmettre une information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. Une bordure rouge sur un champ de formulaire en erreur convient, tant qu'une icône ou une ligne de texte dit aussi ce qui ne va pas. Un graphique à cinq lignes colorées a aussi besoin d'étiquettes, de styles de ligne différents ou de marqueurs. Les liens au milieu d'un paragraphe ont besoin d'un soulignement ou d'un autre indice que la couleur.

La raison tient en partie à la vision des couleurs. Le texte de neurosciences d'OpenStax explique que certaines personnes portent une variation génétique qui leur donne deux types de cônes au lieu de trois, ou un pigment de cône qui fonctionne différemment. Elles ne sont pas aveugles à une couleur, mais certaines couleurs que la plupart des gens distinguent leur paraissent identiques. Les formes rouge-vert sont les plus courantes et touchent environ 8 % des hommes. D'autres raisons comptent aussi : un téléphone en plein soleil, un projecteur bon marché, une impression en noir et blanc. Un design qui fonctionne encore en niveaux de gris fonctionne dans tous ces cas.

La luminosité fait le gros du travail

Pour cette raison, les designers expérimentés planifient une palette en deux passes. D'abord ils décident des paliers de luminosité : un fond très clair, un ton moyen pour les bordures, un ton sombre pour le texte. Ensuite ils choisissent les teintes. Vérifier chaque paire texte et fond avec le rapport de contraste de l'unité 6 est le moyen le plus rapide de savoir si les paliers sont assez éloignés. Les teintes complémentaires ne garantissent pas le contraste. Dans le modèle, l'orange de la marque et son complément bleu ont la même saturation et la même luminosité TSL, et le rapport entre eux n'est que de 1.06:1. Deux couleurs peuvent être aussi éloignées que possible en teinte et rester difficiles à lire l'une sur l'autre.

Une méthode de travail simple rassemble les unités de ce cours. Commence par une teinte qui convient au sujet. Utilise une harmonie de l'unité 4 pour choisir une ou deux teintes d'appoint. Donne à la couleur dominante la plus grande partie de la surface, à peu près 60 %, à une couleur secondaire 30 % et à un accent 10 %, la règle pratique du guide de l'Université du Delaware. Choisis la luminosité de chaque paire de couleurs de texte et de fond jusqu'à ce que chacune atteigne au moins 4.5:1, ou 3:1 pour les grands titres et les icônes. Enfin, vérifie que rien ne dépend de la seule couleur : les erreurs ont des mots, les liens des soulignements, les graphiques des étiquettes.

Les graphiques méritent un soin particulier, car ils ont souvent besoin de nombreuses couleurs à la fois. Le guide de l'Université du Delaware renvoie à ColorBrewer, un outil conçu pour les palettes de cartes et de graphiques. Pour des valeurs allant du plus faible au plus élevé, une palette séquentielle d'une seule teinte qui passe du clair au sombre continue de fonctionner en niveaux de gris. Pour des catégories, utilise le moins de couleurs possible, donne à chacune une étiquette à côté de la ligne ou de la barre plutôt que seulement dans une légende, et garde des paliers de luminosité assez différents pour que deux voisines ne se ressemblent jamais.