Utilisez la couleur pour exprimer le style et communiquer un message. Définir les couleurs de votre application peut être crucial pour la personnalisation, la définition de l'objectif sémantique et, bien sûr, l'identité de la marque.
Points à retenir
- Pour garantir l'accessibilité :
- Vérifiez le contraste des couleurs et évitez d'associer des couleurs aux tons similaires.
- Notez que le rouge et le vert sont des motifs courants, mais qu'ils ne sont pas accessibles aux utilisateurs atteints de certains types de daltonisme.
- Apprenez à utiliser les couleurs de manière pertinente: les applications peuvent être vives et expressives, mais respectez une palette de couleurs. Étendre votre schéma avec trop de couleurs sémantiques peut être déroutant, tandis qu'un trop grand nombre de couleurs décoratives peut être accablant.
- Les couleurs peuvent avoir des motifs. Répétez donc les motifs de couleurs établis. Si vous utilisez des couleurs sémantiques dans votre application, utilisez des couleurs cohérentes.
- Pour que votre application fonctionne bien dans différents contextes, créez un jeu de couleurs clair et sombre (et idéalement des thèmes de contraste).
- Attribuez des couleurs avec des jetons pour indiquer le rôle de couleur de l'élément, au lieu d'utiliser une valeur codée en dur.
- Les couleurs peuvent provenir de différentes sources dynamiques et statiques, mais évitez d'en mélanger trop dans la même vue.
- Lorsque vous utilisez une couleur de contenu dynamique, essayez d'éviter d'extraire des couleurs de plusieurs éléments de contenu.
Espace colorimétrique sur Android
Pour bien comprendre comment Android applique la couleur à votre UI, il est important de commencer par identifier la façon dont elle s'affiche sur un appareil.
Affichage des couleurs sur un appareil
Votre application s'affiche sur un écran rétroéclairé, qui utilise des couleurs numériques et respecte certains modèles et règles qui aident nos yeux à percevoir cette couleur. La couleur numérique est une couleur additive, créée par l'ajout ou le mélange de différentes lumières pour créer un spectre complet de couleurs. La façon dont les humains perçoivent les couleurs d'un écran à l'autre peut varier considérablement en fonction du calibrage des couleurs de l'appareil, du type d'écran, des paramètres et de l'espace colorimétrique.
Lorsque vous concevez une application, gardez à l'esprit que les couleurs utilisées ne sont peut-être pas identiques en raison de ces facteurs, sans parler des perceptions uniques des couleurs par les utilisateurs individuels.
À propos des espaces colorimétriques
Un espace colorimétrique est une organisation de couleurs qui utilise un modèle de couleur. Le RVB est un modèle de couleur additif qui crée le spectre de couleurs à partir du rouge, du vert et du bleu, tandis que le CMJN, qui est utilisé pour l'impression, est soustractif. C'est pourquoi les concepteurs interactifs utilisent généralement le modèle RVB ou des modèles similaires pour choisir des couleurs.
Material 3 (M3) a introduit HCT, un nouvel espace de couleurs qui utilise la teinte, la chromie et le ton pour définir des couleurs qui sont visuellement précises par rapport à d'autres modèles tels que TSL.
Pour en savoir plus sur la science des couleurs et le développement de la HCT, consultez The Science of Color & Design (La science de la couleur et du design).
Teinte, chromaticité et ton
La HCT permet d'utiliser les couleurs de manière plus personnalisée et flexible, tout en respectant les paramètres du système. Le modèle HCT modélise les couleurs à l'aide de la teinte, de la chrominance et du ton:
- Teinte: la teinte est semblable à l'adjectif qu'un utilisateur peut utiliser pour décrire la couleur, par exemple "rouge" ou "violet électrique". La valeur HCT de la teinte varie de 0 à 360.
- Chroma: le chroma représente la saturation de la couleur, allant du gris neutre à la couleur la plus vive. Dans l'espace de couleurs HCT, la chromie a une valeur maximale d'environ 120.
- Ton: le ton correspond à la luminance, ou luminosité, d'une couleur. La HCT utilise le ton pour créer du contraste. Les couleurs définies sur la même valeur tonale ne sont pas accessibles pour certains contextes d'accessibilité. Les tons de valeur inférieure sont plus foncés, et les tons de valeur supérieure sont plus clairs.
Processus du système de couleurs
La couleur M3 est basée sur le modèle HCT pour dériver des jeux de couleurs harmonieux et accessibles, et facilite les fonctionnalités de couleurs dynamiques. Le système de couleurs M3 commence à partir d'une couleur source. Cette couleur source est traduite en cinq couleurs clés: primaire, secondaire, tertiaire, neutre et variante neutre. Ces cinq couleurs clés créent des palettes tonales composées d'incréments toniques pour chaque couleur clé.
Si vous attribuez manuellement une couleur clé, notez le chroma et le ton de l'entrée, car le ton de la couleur peut ne pas correspondre à la valeur tonale du rôle de couleur.
Le système de couleurs M3 est alimenté par les utilitaires de couleurs Material (MCU), un ensemble de bibliothèques de couleurs contenant des algorithmes et des utilitaires qui vous permettent de développer plus facilement des thèmes et des jeux de couleurs dans votre application.
La vidéo suivante explique comment dériver des jeux de couleurs.
Limites de couleur
Les limites de couleur sont les limites physiques de la couleur, qu'il s'agisse de la physique réelle, de nos propres limites visuelles biologiques ou des limites du rendu des couleurs à l'écran. Par exemple, certaines teintes ne peuvent pas exister avec certains chromas ou tons. C'est pour cette raison que les couleurs telles que le bleu clair ou le rouge clair vif ne sont pas tout à fait possibles. La mise en correspondance des couleurs de ton doit être cohérente pour toutes les valeurs de teinte.
La figure précédente montre trois graphiques de mappage des tons différents pour les valeurs de teinte H105, H25 et H285.
Graphique 1 – teinte 105 (jaune) Indique la disponibilité de la couleur. Le chroma et le ton fonctionnent comme un graphique. La teinte jaune a une chrominance limitée avec certains tons le long du graphique. Le jaune n'a pas une large gamme de vibrance dans les tons plus bas.
Graphique 2 – Teinte 25 (rouge) Affiche plus d'options chromatiques que la teinte 105 (jaune). Dans cette carte de tons, le point de couleur le plus élevé se situe à un niveau de ton inférieur.
Graphique 3 : teinte 285 (bleu) Indique que la saturation la plus élevée se trouve à un ton encore plus sombre. En revanche, la capacité chromatique est perdue pour les tons plus clairs.
Jeu de couleurs
Un jeu de couleurs est l'ensemble d'accents et de surfaces dérivés de tons spécifiques et attribués à des rôles de couleur, qui sont ensuite mappés à des éléments et des composants d'UI. Les rôles de couleur font référence à l'utilisation de la couleur, et non à sa teinte. (par exemple, sur le primaire plutôt que sur le bleu).
Les jeux de couleurs sont conçus pour être harmonieux, assurer un texte accessible et distinguer les éléments et les surfaces de l'UI les uns des autres. Les paires de rôles de couleur (composées de rôles de conteneur et de rôles sur le conteneur) ont des valeurs tonales qui offrent un contraste accessible.
Des jeux de couleurs clairs et sombres sont créés et ont leurs propres attributions de tons spécifiques.
Le système de couleurs Material et les jeux de couleurs personnalisés fournissent des valeurs par défaut pour la couleur en tant que point de départ pour la personnalisation.
En savoir plus sur le système de couleurs M3
Pour un jeu de couleurs personnalisable, explorez le kit d'UI Android.
Appliquer une couleur à votre UI
La couleur de l'UI se compose de couleurs d'accentuation, sémantiques et de surface.
- Les couleurs d'accentuation font référence aux couleurs principales qui font généralement partie de la palette de couleurs de la marque Android.
- Les couleurs sémantiques (ou couleurs personnalisées dans Material 3) sont des couleurs ayant une signification spécifique.
- Les couleurs de surface font référence à toutes les couleurs dérivées neutres utilisées pour les couleurs d'arrière-plan.
Couleur d'accentuation
Les couleurs d'accentuation sont généralement les plus expressives au sein d'une UI, qu'il s'agisse de votre image de marque, d'actions à mettre en avant, de votre expression personnelle ou de l'expression de l'utilisateur.
Chaque couleur d'accentuation (primaire, secondaire et tertiaire) est fournie dans un groupe de quatre à huit couleurs compatibles de tons différents pour l'association, l'accentuation et l'expression visuelle.
Couleurs dynamiques
Les couleurs d'accentuation peuvent être définies à partir de sources dynamiques.
À partir d'Android 12 (niveau d'API 31), la couleur dynamique permet au système d'extraire une couleur source à partir du fond d'écran ou du contenu intégré d'un utilisateur, comme un élément d'affiche. La couleur dynamique utilise des algorithmes et des processus MCU pour créer des jeux de couleurs et les implémenter avec peu d'effort. Pour appliquer une couleur dynamique à votre application, consultez Permettre aux utilisateurs de personnaliser leur expérience de couleur dans votre application.
Essayez l'atelier de programmation Visualiser la couleur dynamique pour découvrir la couleur dynamique de manière pratique.
Statique
Un schéma statique est un schéma dont les valeurs ne changent pas (ou relativement). Une méthode courante pour créer un jeu de couleurs statique consiste à utiliser les couleurs de la marque, en alignant les couleurs primaires, secondaires et tertiaires sur la palette de couleurs principale de la marque.
Même si vous utilisez des couleurs dynamiques, nous vous recommandons vivement de créer un jeu de couleurs statique en remplacement si les couleurs dynamiques ne sont pas disponibles sur l'appareil de l'utilisateur. Sinon, le système utilise le jeu de couleurs violet de référence.
Avec Material Theme Builder, vous pouvez appliquer l'algorithme de couleur MCU pour générer un thème statique et personnalisé. Vous obtenez ainsi les couleurs que vous avez choisies, mais qui sont alignées sur les jetons du système de couleurs M3 et les principes d'accessibilité harmonieuse.
Il est toujours possible de créer un schéma statique entièrement personnalisé. Pour ce faire, attribuez des valeurs différentes dans les styles de couleur (color.kt ou color.xml), ou exportez le fichier de thème à partir de Material Theme Builder pour Figma après avoir mis à jour les propriétés de style Figma.
Utilisation
Les composants Material disposent de rôles de couleur prédéfinis, mais vous pouvez utiliser les jetons de couleur dans l'ensemble de votre UI et des éléments personnalisés. Utilisez toutes les couleurs d'accentuation de manière réfléchie, en tenant compte du fait que l'œil humain est particulièrement attiré par les couleurs vives.
Comme pour le type, le système applique la couleur selon une hiérarchie, avec la couleur primaire et ses rôles respectifs attribués aux incitations à l'action (CTA) cruciales. Nous recommandons d'attribuer des rôles principaux aux composants les plus visibles (comme les boutons d'action flottants).
Lorsque vous choisissez une couleur principale, il est recommandé de l'attribuer à votre marque. Vous pouvez également sélectionner une couleur pour représenter les composants interactifs, ce qui vous permet d'utiliser les couleurs de votre marque plus judicieusement. Les couleurs secondaires et tertiaires continuent à descendre dans la hiérarchie de l'importance des surlignages.
Un aspect trop saturé peut entraîner l'utilisation des rôles de couleur de base (primaire, secondaire ou tertiaire) uniquement. Pour vous aider à créer une hiérarchie de couleurs, appliquez des jeux de couleurs qui incluent des couleurs de conteneur moins vives et des rôles de contour.
Pour garantir une meilleure expérience utilisateur, utilisez des couleurs primaires plus vives pour mettre en avant les actions les plus importantes dans la hiérarchie visuelle de votre application. Dans l'image suivante, le bouton d'action flottant de la première image a une couleur atténuée avec le même ton et la même chromie que la navigation, ce qui le fait se fondre. La deuxième image montre un bouton d'action flottant qui attire davantage l'attention grâce à une couleur primaire vive.
Pour découvrir la couleur dynamique, essayez l'atelier de programmation sur la personnalisation de la couleur Material.
Couleur sémantique
Les couleurs sémantiques sont des couleurs auxquelles une signification particulière a été attribuée. Par exemple, Error (Erreur) est une couleur sémantique.
Soyez cohérent avec la signification des couleurs. Si vous établissez un modèle, répétez-le dans l'ensemble de l'application. Par exemple, si vous avez défini le violet pour indiquer une fonctionnalité d'adhésion, utilisez-le pour toutes les instances de cette fonctionnalité.
Dans l'exemple suivant, une application utilise le rouge pour indiquer une erreur dans un champ de texte, mais le violet pour l'autre. Cela peut prêter à confusion lorsque vous parcourez un formulaire.
Bien que le jeu de couleurs Material fournisse la couleur sémantique error (erreur), des couleurs sémantiques supplémentaires sont créées à l'aide de couleurs personnalisées pour étendre votre jeu de couleurs. En savoir plus sur les couleurs personnalisées
L'harmonisation permet d'aligner les couleurs dynamiques générées par l'utilisateur avec les couleurs personnalisées de votre application afin de créer des palettes de couleurs plus harmonieuses.
Couleurs de surface
Les couleurs de surface sont conçues pour les éléments d'arrière-plan, comme des conteneurs de composant, des feuilles et des panneaux, et représentent la majorité des couleurs de votre application. N'hésitez pas à utiliser une grande surface. L'œil humain a besoin d'espace pour se reposer. Les surfaces aident également à contenir le contenu et à orienter le lecteur.
M3 a introduit le concept de surfaces tonales, ce qui signifie que toutes les couleurs sont dérivées des palettes tonales. Les tons créent à la fois de la profondeur et un contraste plus élevé pour faciliter l'accessibilité. Pour en savoir plus sur les rôles de surface, consultez les conseils M3 sur les rôles de surface.
Couleur et accessibilité
Les utilisateurs voient la couleur de différentes façons selon leur acuité visuelle. Étant donné que certains lecteurs sont daltoniens, vous devez vérifier les combinaisons de couleurs pour vous assurer que les éléments de l'interface utilisateur ne se mélangent pas. Si l'opacité et l'épaisseur ne correspondent pas à la teinte exacte d'une couleur, elles ont un impact considérable sur la façon dont les utilisateurs perçoivent la couleur.
Le contraste des couleurs est la différence entre la luminance des éléments du premier plan et ceux de l'arrière-plan, représentée sous forme de ratio. Une note est attribuée à ce ratio. Par exemple, mesurer le contraste entre le texte d'un bouton et son conteneur permet de déterminer la lisibilité du texte. Les consignes de contraste des couleurs sont réparties entre contenus textuel et non textuel, chacune avec son propre ensemble de notes. Pour en savoir plus, consultez Concevoir une interface utilisateur à l'aide de couleurs accessibles.
Ne faites jamais de la couleur la seule affordance ou l'unique indicateur d'une action disponible. Utilisez un bouton de composant, modifiez l'épaisseur de la police ou même une icône pour indiquer à l'utilisateur qu'il peut interagir avec l'élément.
Implémenter la couleur
Les jetons sont de petites représentations sémantiques variables des données de conception. Ils sont répétables et remplacent les valeurs statiques, telles que les codes hexadécimaux pour la couleur, par des noms explicites. Pour attribuer le rôle de couleur d'un élément, utilisez des jetons au lieu de valeurs de couleur codées en dur.
Consultez l'exemple Figma "Maintenant sur Android" pour obtenir des exemples de mappage des rôles de couleur.
Les valeurs de couleur sont définies dans un fichier de couleurs color.kt à l'aide de Compose (ou color.xml à l'aide de Views). Ces couleurs définies en tant que styles font partie d'un thème. Pour en savoir plus, consultez Concevoir pour les thèmes mobiles Android.
Pour définir des valeurs de couleur sur Android, utilisez un code hexadécimal, qui représente le RVB au format à six chiffres. Pour capturer l'opacité, ajoutez la valeur au début pour créer un code à huit chiffres.
Utilisez Material Theme Builder:
Vous pouvez créer des jeux de couleurs clairs et sombres personnalisés à l'aide de Material Theme Builder (MTB).
MTB vous permet de visualiser les couleurs dynamiques, de générer des jetons Material Design et de personnaliser vos jeux de couleurs.
Vous pouvez personnaliser entièrement le jeu de couleurs en mettant à jour les propriétés de style dans le panneau de l'inspecteur Figma. Ces valeurs modifiées sont exportées.
