Color

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

La couleur est un élément visuel important de la plupart des interfaces utilisateur. Au-delà de l’esthétique pure, la couleur a des significations associées et suscite des réponses émotionnelles. Pour éviter toute confusion dans la signification, la couleur doit être utilisée de manière cohérente. Pour obtenir les réponses émotionnelles souhaitées, la couleur doit être utilisée de manière appropriée.

La couleur est souvent considérée comme un espace de couleur, où RVB (rouge, vert, bleu), HSL (teinte, saturation, luminosité) et HSV (teinte, saturation, valeur) sont les espaces de couleurs les plus couramment utilisés.

L’espace de couleurs RVB peut être visualisées sous forme de cube.

Bien que la technologie d’affichage utilise des valeurs RVB et que par conséquent les développeurs pensent souvent aux couleurs en termes de RVB, l’espace de couleur RVB ne correspond pas à la façon dont les gens perçoivent la couleur. Par exemple, si vous ajoutez du rouge au cyan foncé, le résultat n’est pas perçu comme plus rouge, mais comme un cyan plus clair.

Dans cet exemple, l’ajout de rouge au cyan foncé le rend plus clair, et non plus rouge. L’espace de couleur RVB ne correspond pas à la façon dont les gens perçoivent la couleur.

Les espaces de couleur HSL/HSV se composent de trois composants : teinte, saturation et luminosité ou valeur. Ces espaces de couleurs sont souvent utilisés au lieu de RVB, car ils correspondent mieux à la façon dont les gens perçoivent la couleur.

L’espace de couleur HSL forme un cône double qui est blanc en haut, noir en bas et neutre au milieu :

• Teinte: Couleur de base dans la roue de couleur, allant de 0 à 360 degrés où 0 et 360 degrés sont rouges.

  

  La roue des couleurs, où le rouge est de 0 degrés, le jaune est de 60 degrés, le vert est de 120 degrés, le cyan est de 180 degrés, le bleu est de 240 degrés et le magenta est de 300 degrés.

• Saturation: La couleur est pure (ou terne), allant de 0 à 100, où 100 est complètement saturé et 0 gris.

• Luminosité: La couleur est claire, allant de 0 à 100, où 100 est aussi clair que possible (blanc, quelle que soit la teinte et la saturation) et 0 est aussi foncé que possible (noir).

  

  L’espace de couleurs HSL peut être visualisées sous la forme d’un cône double.

L’espace de couleur HSV est similaire, sauf que son espace forme un seul cône :

• Teinte: Couleur de base dans la roue de couleur, allant de 0 à 360 degrés où 0 et 360 degrés sont rouges.

• Saturation: La couleur est pure (ou terne), allant de 0 à 100, où 100 est complètement saturé et 0 gris.

• Valeur: La couleur est brillante, allant de 0 à 100, où 100 est aussi lumineux que possible (ce qui correspond à la moitié de luminosité dans l’espace HSL) et 0 est aussi foncé que possible (noir).

  

  L’espace de couleur HSV peut être visualisées sous la forme d’un seul cône.

Dans les espaces HSL et HSV, si la saturation est 0, la luminosité spécifie une nuance de gris. Dans Windows, les espaces HSL et HSV sont généralement réappérés à une échelle comprise entre 0 et 240 afin que les couleurs puissent être représentées avec une valeur 32 bits.

Note: Les recommandations relatives aux polices et à l’accessibilité sont présentées dans des articles distincts.

Principes de conception

L’utilisation efficace de la couleur peut rendre l’interface utilisateur de votre programme plus efficace. La couleur peut aider les utilisateurs à comprendre certaines significations en un coup d’œil. La couleur peut également rendre votre produit plus esthétiquement agréable et raffiné.

Malheureusement, il est trop facile d’utiliser la couleur de manière inefficace, surtout si vous n’êtes pas formé en conception visuelle. Une mauvaise utilisation de la couleur entraîne des dessins qui semblent non professionnels, datés, confus ou tout simplement laids. Une mauvaise utilisation de la couleur peut être pire que de ne pas utiliser de couleur du tout.

Cette section explique ce que vous devez savoir pour utiliser efficacement la couleur.

Utilisation de la couleur

La couleur est généralement utilisée dans l’interface utilisateur pour communiquer :

• Sens. La signification d’un message peut être résumée par la couleur. Par exemple, la couleur est souvent utilisée pour communiquer status où le rouge est un problème ou une erreur, le jaune est la prudence ou l’avertissement et le vert est bon.
• State (État). L’état d’un objet peut être indiqué par la couleur. Par exemple, Windows utilise la couleur pour indiquer les états de sélection et de pointage. Les liens dans les pages Web utilisent le bleu pour les pages nonvisées et le violet pour les pages visitées.
• Différenciation. Personnes supposer qu’il existe une relation entre les éléments de la même couleur, le codage de couleur est donc un moyen efficace de différencier les objets. Par exemple, dans un élément de panneau de configuration, les volets office utilisent un arrière-plan vert pour les séparer visuellement du contenu main. En outre, Microsoft Outlook permet aux utilisateurs d’affecter différents indicateurs de couleur aux messages.
• Accent. La couleur peut être utilisée pour attirer l’attention des utilisateurs. Par exemple, Windows utilise des instructions main bleues pour les aider à se distinguer de l’autre texte.

Bien sûr, la couleur est souvent utilisée dans les graphiques pour des raisons purement esthétiques. Bien que l’esthétique soit importante, vous devez choisir les couleurs des éléments d’interface utilisateur principalement en fonction de ce qu’ils signifient, et non de leur apparence.

Interprétation des couleurs

L’interprétation de la couleur par les utilisateurs est souvent dépendante de la culture. Par exemple, dans le États-Unis, les vêtements de mariage de la mariée sont en grande partie associés à la couleur blanche, tandis que le noir est associé aux enterrements. Cependant, il y a longtemps au Japon, le symbolisme des couleurs était tout le contraire: le blanc était la couleur prédominante lors des enterrements, et le noir était considéré comme une couleur qui apporte de la chance pour les mariages.

Cela dit, l’interprétation du rouge, du jaune et du vert pour status est cohérente globalement. Cela est dû à la Convention de Vienne de l’UNESCO sur la signalisation routière, qui définit la convention mondiale pour les feux de circulation (où rouge signifie s’arrêter, vert signifie continuer, et jaune signifie continuer avec prudence). Vous pouvez utiliser ces couleurs status sans vous soucier des interprétations dépendantes de la culture.

Au-delà des couleurs status, Windows attribue des significations aux couleurs en fonction de la convention, comme présenté dans la section Recommandations de cet article. Assurez-vous que l’utilisation des couleurs de votre programme est compatible avec ces conventions de couleur.

Accessibilité des couleurs

L’utilisation de la couleur affecte l’accessibilité de votre logiciel au public le plus large possible. Les utilisateurs aveugles ou malvoyants peuvent ne pas être en mesure de bien voir les couleurs, voire du tout. Environ 8 pour cent des mâles adultes ont une forme de confusion des couleurs (souvent appelée à tort « daltonisme »), dont la confusion des couleurs rouge-vert est la plus courante.

Couleurs primaires telles qu’observées avec une vision des couleurs normale.

Les couleurs primaires observées avec la Protanopia (1 % de la population masculine).

Couleurs primaires observées avec la deutérantopie (6 % de la population masculine).

Couleurs primaires observées avec la tritanopia (1 % de la population masculine).

Pour plus d’informations, consultez Les utilisateurs Color-Blind peuvent-ils voir votre site ?

Utiliser la couleur pour renforcer visuellement

La meilleure solution aux problèmes d’interprétation et d’accessibilité des couleurs consiste à utiliser la couleur pour renforcer visuellement la signification de l’une de ces principales méthodes de communication :

• Texte. Le texte concis est généralement la communication principale la plus efficace, soit directement sur l’interface utilisateur, soit via une info-bulle.

Dans cet exemple, le texte d’info-bulle est utilisé pour communiquer la signification d’une icône.

• Conception : Les icônes se distinguent facilement par les conceptions, en particulier leur forme de contour.

Dans cet exemple, les icônes standard sont facilement reconnaissables en fonction de leur conception.

• Lieu. L’emplacement relatif peut également être utilisé, mais cette approche est plus faible que les alternatives. Pour être efficace, l’emplacement doit être standard et bien connu, comme pour les feux de circulation.

Bien que la couleur soit l’attribut le plus évident de nombreuses conceptions, elle doit toujours être redondante.

Conception avec couleur

Ironiquement, la meilleure façon de concevoir pour la couleur est de commencer par concevoir sans couleur, à l’aide de wireframes ou de monochromes , puis d’ajouter de la couleur plus tard. Cela permet de s’assurer que les informations ne sont pas communiquées à l’aide de la couleur seule. Il permet également de garantir l’apparence de vos imprimés sur les imprimantes monochromes.

Utiliser des couleurs de thème ou de système

Bien qu’il existe de nombreux facteurs complexes dans l’utilisation efficace de la couleur, dans l’interface utilisateur Windows, le choix de la couleur se résume souvent à choisir simplement la couleur de thème ou de système appropriée selon quelques règles simples. Les utilisateurs peuvent ensuite sélectionner et personnaliser ces jeux de couleurs à leur choix.

Ce faisant, non seulement vous répondez aux préférences de couleur de tous vos utilisateurs, mais vous éliminez la charge de choisir le jeu de couleurs parfait qui convient à tous les goûts, styles et cultures (ce qui, bien sûr, est impossible).

Si vous ne faites qu’une seule chose...

Choisissez des couleurs en sélectionnant la couleur de thème ou la couleur système appropriée. N’utilisez jamais la couleur comme méthode principale de communication, mais comme méthode secondaire pour renforcer visuellement le sens. Concevez à l’aide de wireframes ou de monochromes pour garantir que la couleur est secondaire.

Utiliser correctement les couleurs du thème ou du système

Supposons que les utilisateurs choisissent les couleurs du thème ou du système en fonction de leurs besoins personnels et que les couleurs du thème ou du système sont construites de manière appropriée. Sur la base de cette hypothèse, si vous choisissez toujours les couleurs de thème ou de système en fonction de leur objectif et que vous associez les premiers plans aux arrière-plans associés, les couleurs sont garanties d’être lisibles et respecter les souhaits des utilisateurs dans tous les modes vidéo, y compris le mode à contraste élevé. Par exemple, la couleur du système de texte de fenêtre est garantie pour être lisible par rapport à la couleur système d’arrière-plan de la fenêtre.

Plus précisément, toujours :

• Choisissez des couleurs en fonction de leur objectif. Ne choisissez pas de couleurs en fonction de leur apparence actuelle, car cette apparence peut être modifiée par l’utilisateur ou les versions futures de Windows.
• Mettre en correspondance les couleurs de premier plan avec les couleurs d’arrière-plan associées. Les couleurs de premier plan sont garanties d’être lisibles uniquement par rapport aux couleurs d’arrière-plan associées. Ne pas mélanger et mettre en correspondance les couleurs de premier plan avec d’autres couleurs d’arrière-plan, ou pire encore, d’autres couleurs de premier plan.
• Ne mélangez pas les types de couleurs. Autrement dit, faites toujours correspondre les couleurs de thème à leurs couleurs de thème associées, les couleurs système avec les couleurs système associées et les couleurs câblées avec d’autres couleurs câblées. Par exemple, une couleur de texte de thème n’est pas garantie pour être lisible sur un arrière-plan câblé.
• Si vous devez avoir des couleurs câblées, gérez le mode à contraste élevé comme cas spécial.

Si vous ne faites qu’une seule chose...

Choisissez toujours les couleurs du thème ou du système en fonction de leur objectif, et associez les premiers plans aux arrière-plans associés.

Utilisation d’autres couleurs

Bien que le thème Windows définisse un ensemble complet de parties de thème, vous constaterez peut-être que votre programme a besoin de couleurs qui ne sont pas définies dans le fichier de thème. Bien que vous puissiez connecter en dur de telles couleurs, une meilleure approche consiste à dériver les couleurs du thème ou des couleurs système. L’utilisation stratégique de cette approche vous offre tous les avantages de l’utilisation des couleurs de thème et de système, mais avec beaucoup plus de flexibilité.

Par exemple, supposons que vous avez besoin d’un arrière-plan de fenêtre plus foncé que la couleur d’arrière-plan de la fenêtre de thème. Dans l’espace de couleur HSL, avoir une couleur plus foncée signifie une couleur avec une luminosité inférieure. Ainsi, vous pouvez dériver une couleur d’arrière-plan de fenêtre plus sombre en procédant comme suit :

• Obtenez la couleur RVB du thème d’arrière-plan de la fenêtre.
• Convertissez le RVB en sa valeur HSL.
• Réduisez la valeur de luminosité (par exemple de 20 %).
• Reconverti en valeurs RVB.

Avec cette approche, la couleur dérivée est garantie d’être perçue comme une nuance plus foncée de la couleur d’origine (sauf si la couleur d’origine était très foncée au début.)

Dans cet exemple, une couleur d’arrière-plan de fenêtre plus sombre est dérivée de la couleur du thème.

Tests de couleurs

Pour déterminer si l’utilisation de la couleur par votre programme est accessible et n’est pas utilisée comme méthode de communication principale, nous vous recommandons d’utiliser les utilitaires Fujitsu ColorDoctor ou Vischeck pour case activée pour :

• Dépendance globale vis-à-vis de la couleur à l’aide du filtre d’échelle gris.
• Problèmes de confusion des couleurs spécifiques à l’aide des filtres Protanopia, Deutéranopia et Tritanopia.

Pour déterminer si l’utilisation de la couleur par votre programme est correctement programmée, testez votre programme dans les modes suivants :

• Thème activé à l’aide du thème Windows par défaut.
• Thème activé à l’aide d’un thème autre que par défaut.
• Thème désactivé (« Style Windows Classic » dans les paramètres de thème de l’élément Panneau de configuration Personnalisation).
• Thème noir à contraste élevé (texte blanc sur un arrière-plan noir, appelé Aquatique dans Windows 11).
• Thème Blanc à contraste élevé (texte noir sur un arrière-plan blanc, appelé Désert sur Windows 11).

Tous les éléments d’écran doivent être lisibles et apparaître comme prévu, même immédiatement après les changements de mode.

Consignes

Général

• N’utilisez jamais la couleur comme méthode principale de communication, mais comme méthode secondaire pour renforcer visuellement le sens.

Utilisation des couleurs du thème et du système

• Dans la mesure du possible, choisissez des couleurs en sélectionnant la couleur de thème ou la couleur système appropriée. Ce faisant, vous pouvez toujours respecter la préférence de couleur des utilisateurs.
• Choisissez les couleurs du thème et du système en fonction de leur objectif. Ne choisissez pas de couleurs en fonction de leur apparence actuelle, car cette apparence peut être modifiée par l’utilisateur ou les versions futures de Windows.
• Mettre en correspondance les couleurs de premier plan avec les couleurs d’arrière-plan associées. Les couleurs de premier plan sont garanties d’être lisibles uniquement par rapport aux couleurs d’arrière-plan associées. Ne pas mélanger et mettre en correspondance les couleurs de premier plan avec d’autres couleurs d’arrière-plan, ou pire encore, d’autres couleurs de premier plan.
• Ne mélangez pas les types de couleurs. Autrement dit, faites toujours correspondre les couleurs de thème à leurs couleurs de thème associées, les couleurs système avec les couleurs système associées et les couleurs câblées avec d’autres couleurs câblées. Par exemple, une couleur de texte de thème n’est pas garantie pour être lisible sur un arrière-plan câblé.
• Si vous devez utiliser une couleur qui n’est pas une couleur de thème ou de système :
  • Préférez dériver la couleur d’un thème ou d’une couleur système plutôt que de le faire en durwiing sa valeur. Utilisez le processus décrit plus haut dans cet article, dans Utilisation d’autres couleurs.
  • Gérez le mode à contraste élevé comme cas spécial.
• Gérer les modifications de thème. Les modifications de thème sont gérées automatiquement par les fenêtres avec des cadres de fenêtre standard et des contrôles courants. Les fenêtres avec des cadres de fenêtre personnalisés, des contrôles personnalisés ou de dessin de propriétaire et d’autres utilisations de couleur doivent gérer explicitement les modifications de thème.
  • Développeurs: Vous pouvez répondre aux événements de modification de thème en gérant le message WM_THEMECHANGED.

Signification de la couleur

• Bien que vous devriez utiliser des couleurs de thème et système (ou des couleurs dérivées) chaque fois que vous le pouvez, assurez-vous que toute autre utilisation de la couleur est compatible avec l’utilisation suivante de la couleur dans Windows.

Teinte	Signification	Utiliser dans Windows
bleu/vert	Marque Windows	Arrière-plan : Personnalisation Windows.
verre, noir, gris, blanc	neutre	Arrière-plan : cadres de fenêtre standard, menu Démarrer, barre des tâches, barre latérale. Premier plan : texte normal.
blue	démarrer, valider	Arrière-plan : boutons de commande par défaut, recherche, ouverture de session. Icônes : informations, aide. Au premier plan : instructions main, liens.
rouge	erreur, arrêt, vulnérable, critique, attention immédiate, restreinte	Arrière-plan : status, progression arrêtée (barres de progression). Icônes : erreur, arrêter, fermer la fenêtre, supprimer, entrée obligatoire, manquante, indisponible.
yellow	avertissement, prudence, douteux	Arrière-plan : status, progression suspendue (barres de progression). Icônes : avertissement
green	aller, continuer, progresser, en toute sécurité	Arrière-plan : status, progression normale (barres de progression). Icônes : go, done, refresh. Premier plan : chemins d’accès et URL (dans les résultats de la recherche).
purple	Visité	Au premier plan : liens visités (pour les liens dans les Explorer et les documents Internet Windows).

• Pour éviter de communiquer les significations précédentes, choisissez des couleurs qui ont une saturation moyenne à faible et une luminosité élevée ou faible. Les utilisateurs associent les significations précédentes aux couleurs qui ont une saturation complète ou élevée et une luminosité de niveau moyen, de sorte que vous pouvez éviter ces associations en choisissant différentes nuances.

Dans cet exemple, il existe trois nuances de jaune différentes, mais seule la nuance de luminosité moyenne très saturée communique un avertissement. L’icône de dossier jaune ne ressemble pas à un avertissement.

Utilisation de la couleur avec des données

• Lorsque cela est utile, affectez une couleur aux données pour aider les utilisateurs à les différencier. Notez que les utilisateurs supposent que les données avec des couleurs similaires ont des significations similaires.

• Affectez par défaut des couleurs faciles à distinguer. En règle générale, les couleurs sont faciles à distinguer si elles sont éloignées les unes des autres dans les espaces de couleurs HSL/HSV, tout en conservant un contraste élevé avec leur arrière-plan :

  • Lorsque vous choisissez des couleurs, préférez les harmonies de triade ou les teintes complémentaires, mais pas les teintes adjacentes.

    

    Dans cet exemple, si la première affectation de couleur est rouge, la couleur suivante doit être bleu, vert ou cyan, mais pas magenta, violet, orange ou jaune.

  • Les couleurs ont un contraste élevé s’il existe une grande différence dans leur teinte, saturation ou luminosité.

    

    Dans cet exemple, la couleur de base bleu clair contraste avec les arrière-plans avec de grandes différences de teinte, de saturation ou de luminosité.

  • L’utilisation d’un arrière-plan blanc ou très clair facilite la distinction entre les couleurs de premier plan.

    

    Dans cet exemple, les couleurs d’arrière-plan blanches et claires facilitent la distinction entre la couleur de premier plan.

• Autoriser les utilisateurs à personnaliser ces attributions de couleurs , car le choix des couleurs est subjectif et une préférence personnelle. S’il existe de nombreuses couleurs coordonnées, autorisez les utilisateurs à les modifier en tant que groupe à l’aide de jeux de couleurs.

• Autoriser les utilisateurs à étiqueter ces attributions de couleurs. Cela permet de les identifier et de les trouver plus facilement.

• Contrairement aux couleurs de l’interface utilisateur, les données ne doivent pas changer lorsque les couleurs système changent.

Documentation

• Faites référence aux éléments d’interface utilisateur par leur nom, et non par leurs couleurs. Ces références ne sont pas accessibles et les couleurs système peuvent changer. Si le nom d’un élément d’interface utilisateur n’est pas bien connu ou n’est pas suffisamment descriptif, affichez une capture d’écran à clarifier.

Correct :

Incorrect :

Dans l’exemple incorrect, le message fait référence à la barre d’informations windows Internet Explorer par sa couleur au lieu de son nom.