Couleur

La couleur est un bon outil pour communiquer des informations dans une interface utilisateur. Par exemple, elle peut être utilisée pour :

  • renforcer l'apparence d'un bureau en améliorant un thème,
  • accentuer une alerte dynamique dans une application de gestion de système,
  • mettre en valeur un élément dans une longue liste pour faciliter sa lecture,
  • ajouter une touche esthétique agréable à une icône.

Cependant, la couleur doit toujours être vue comme un complément utile au design et non pas comme une nécessité. Ne tablez jamais uniquement sur la couleur pour afficher les informations importantes ; gardez à l'esprit que votre application doit toujours être utilisable, même si les couleurs ne peuvent pas être perçues correctement (par exemple, si l'utilisateur a un système 8-bits ou est daltonien).

VIII.I.I. Palette

Une palette de 32 couleurs a été développée pour le bureau GNOME. La palette peut être téléchargée sur http://developer.gnome.org/projects/gup/images/ximian-palette. Pour l'utiliser dans The GIMP, enregistrez-la dans votre dossier gimp_1.2/palettes et redémarrez The GIMP. Une palette unique utilisée de manière cohérente aide à donner une apparence uniforme au bureau en minimisant les distractions visuelles. Si vous avez besoin d'une couleur plus foncée ou plus claire que les couleurs de cette palette basique (par ex. pour l'anticrénelage) choisissez une couleur qui est la plus proche de la teinte dont vous avez besoin puis assombrissez ou éclaircissez comme vous le souhaitez.

Figure VIII.1 La palette de base à 32 couleurs de GNOME
Tableau VIII.1 Valeurs RVB et hexadécimales de la palette de base
Couleur Description RVB Hex Couleur Description RVB Hex
3D basique clair 234 232 227 #EAE8E3
3D basique moyen 186 181 171 #BAB5AB
3D basique foncé 128 125 116 #807D74
3D basique obscur 86 82 72 #565248
Vert clair 197 210 200 #C5D2C8
Vert moyen 131 166 127 #83A67F
Vert foncé 93 117 85 #5D7555
Vert obscur 68 86 50 #445632
Rouge clair 224 182 175 #E0B6AF
Rouge moyen 193 102 90 #C1665A
Rouge foncé 136 70 49 #884631
Rouge obscur 102 56 34 #663822
Violet clair 173 167 200 #ADA7C8
Violet moyen 136 127 163 #887FA3
Violet foncé 98 91 129 #625B81
Violet obscur 73 64 102 #494066
Bleu clair 157 184 210 #9DB8D2
Bleu moyen 117 144 174 #7590AE
Bleu foncé 75 105 131 #4B6983
Bleu obscur 49 78 108 #314E6C
Chair claire 239 224 205 #EFE0CD
Chair moyenne 224 195 158 #E0C39E
Chair foncée 179 145 105 #B39169
Chair obscure 130 102 71 #826647
Rouge vif 223 66 30 #DF421E
Rouge vif foncé 153 0 0 #990000
Jaune vif 238 214 128 #EED680
Jaune vif foncé 209 148 12 #D1940C
Vert vif 70 160 70 #46A046
Vert vif foncé 38 199 38 #267726
Blanc 255 255 255 #ffffff
Noir 0 0 0 #000000

VIII.I.II. Teinte, luminosité, contraste

Les utilisateurs ayant des problèmes de vision, tels que les daltoniens ou les mal-voyants, ont besoin d'alternatives aux réglages par défaut. Une bonne interface utilisateur anticipe ces besoins en fournissant des préférences personnalisées et une prise en charge des thèmes favorisant l'accessibilité. Meilleure encore est une application déjà configurée par défaut avec un choix soigneux des couleurs et des contrastes.

Il est estimé que 11 % de la population mondiale a des problèmes de vision des couleurs. Les personnes atteintes ont typiquement des problèmes pour distinguer certaines teintes comme le rouge et le vert (deutéranopie ou protanopie) ou le bleu et le jaune (tritanopie). Par conséquent, il est nécessaire de permettre à l'utilisateur de personnaliser les couleurs dans toutes les parties de votre application qui transmettent des informations importantes. Cela signifie que votre application doit effectivement transmettre les informations en utilisant uniquement les couleurs d'un thème que l'utilisateur choisirait.

Un outil important pour passer en revue les informations sur le daltonisme et vérifier l'éligibilité des images pour les utilisateurs mal-voyants est Vischeck, un outil en ligne qui simule la façon dont une image ou un site Web apparaît pour un utilisateur atteint de deutéranopie, protanopie ou tritanopie.

Figure VIII.2 Comment la terre apparaît pour un utilisateur avec une vision normale des couleurs (à gauche), deutéranopie (au milieu) et tritanopie (à droite) (images extraites de http://www.vischeck.com).

D'autres utilisateurs ont plutôt plus de problèmes avec les niveaux de contraste qu'avec la couleur à l'écran. Certains utilisateurs ont besoin d'un fort niveau de contraste entre les couleurs de l'arrière-plan et du premier plan, telles que noir sur blanc, blanc sur noir ou une autre combinaison à fort contraste. D'autres ressentent un inconfort à moins d'utiliser un réglage à faible contraste, tel que texte gris sur un arrière-plan gris clair.

Vous pouvez répondre à ces besoins en vous assurant que votre application prend en charge les thèmes accessibles de GNOME (que l'on peut trouver dans le module gnome-themes dans cvs) ; il inclut des thèmes à fort et faible contraste et des thèmes à grande taille. Cela signifie que vous devez fournir les tailles par défaut et les grandes tailles pour l'ensemble des icônes à contraste fort, faible et normal avec l'application.

Conseils
  • Utilisez la palette de couleur GNOME. Si vous avez besoin d'une teinte plus foncée ou plus claire partez d'une des couleurs de la palette et assombrissez ou éclaircissez suivant le besoin.
  • N'utilisez pas la couleur comme seul moyen de distinguer les éléments d'informations. Toutes les informations doivent également être fournies par au moins une autre méthode telle que la forme, la position ou une description textuelle.
  • Assurez-vous que votre application ne dépend pas d'un thème particulier. Testez-la avec différents thèmes, plus particulièrement les thèmes d'accessibilité à fort et faible contraste qui utilisent moins de couleurs, pour vérifier que votre application respecte les réglages. Par exemple, tous les textes doivent apparaître avec couleur de premier plan sur couleur d'arrière-plan spécifiées dans le thème choisi.
  • Choisissez les couleurs avec soin. Lorsqu'elles doivent être différentes de manière reconnaissable, choisissez les couleurs claires parmi l'orange, jaune, vert ou bleu-vert, les foncées parmi le bleu, violet, mauve ou rouge car la plupart de gens atteints de daltonisme voient le bleu, violet, mauve et rouge aussi foncé que les couleurs normales.