Couleurs
Le nom des couleurs est basé sur leur rôle au sein du système de couleurs de Material 3.
Ce système a été spécialement conçu pour respecter des standards de contraste de la W3, qui ont pour objectifs de rendre les composants visuels visibles pour tous (spécialement pour les utilisateurs avec un dysfonctionnement de leur vision).
Le système de couleurs de Material 3 respecte en particulier les standards AA et AAA.
Comment utiliser les couleurs selon leur rôle
Chaque couleur de la palette a été générée de manière être utilisée dans un but particulier.
Primary
Pour mettre une emphase importante sur des éléments proéminents de votre interface utilisateur. À utiliser avec parcimonie sur des composants comme des boutons, des textes ou des icônes qui sont affichés sur la couleur Surface.
On Primary
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Primary.
Primary Container
Couleur plus douce et moins accentuée que Primary. Peut également être utilisé comme couleur de fond pour faire ressortir certains composants, comme des Floating Action Buttons.
On Primary Container
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Primary Container.
Secondary
Pour les couleurs de fond des composants moins proéminents de votre interface utiliteur, comme les Chips qui servent souvent de filtres.
On Secondary
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Secondary.
Secondary Container
Couleur plus douce et moins accentuée que Secondary. Peut également être utilisé comme couleur de fond pour les composants moins proéminents. Cette couleur est particulièrement utilisée pour les composants récessifs (par rapport aux composants dominants, qui doivent davantage ressortir).
On Secondary Container
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Secondary Container.
Tertiary
Pour les couleurs de fond, les textes et les icônes affichés sur la couleur Surface. La couleur Tertiary est faite pour être complémentaire à Primary et Secondary.
La tactique est donc de choisir les composants qu'on veut mettre de l'avant, de sélectionner d'abord ceux qui doivent être Primary, puis ceux qui doivent être Secondary, et finalement d'appliquer Tertiary aux composants restant.
On Tertiary
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Tertiary.
Tertiary Container
Couleur plus douce et moins accentuée que Tertiary. Peut également être utilisé comme couleur de fond complémentaire, pour des composants comme le champ de texte.
On Tertiary Container
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Tertiary Container.
Error
À utiliser pour communiquer par l'interface utilisateur qu'une erreur est survenue. La couleur attire l'oeil, ce qui en fait le rôle idéal pour indiquer l'urgence comme couleur de fond ou pour des textes et des icônes affichés sur la couleur Surface.
On Error
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Error.
Surface
Couleur de fond utilisée pour les grands espaces (comme les fonds de page ou de popup).
On Surface
À utiliser uniquement pour les textes et les icônes affichés sur la couleur Surface ou Surface Container.
On Surface Variant
Couleur moins accentuée que On Surface. À utiliser uniquement sur les textes et les icônes moins importants qui sont affichés sur la couleur Surface ou Surface Container.
Background
Même couleur que Surface.
On Background
Même couleur qu'On Surface.
Surface Container Lowest
Couleur de fond pour des conteneurs de composants qui doivent être très peu accentuée par rapport à la couleur Surface (le moins possible).
Surface Container Low
Couleur de fond pour des conteneurs de composants qui doivent être faiblement accentuée par rapport à la couleur Surface (plus que Surface Container Lowest, mais moins que Surface Container).
Surface Container
Couleur de fond par défaut pour des conteneurs de composants, avec une accentuation normale par rapport à la couleur Surface.
Surface Container High
Couleur de fond pour des conteneurs de composants qui doivent être fortement accentuée par rapport à la couleur Surface (plus que Surface Container, mais moins que Surface Container Highest).
Surface Container Highest
Couleur de fond pour des conteneurs de composants qui doivent être énormément accentuée par rapport à la couleur Surface (le plus possible).
Surface Variant
Même couleur que Surface Container Highest.