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
- VIII.I.II. Teinte, luminosité, contraste
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.

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.
![]() |
![]() |
![]() |
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.
- 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.