Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Material 3 Expressive pour Wear OS établit une hiérarchie visuelle en attribuant des valeurs de teinte, de chroma et de ton différentes à ses rôles de couleur, ce qui permet de distinguer efficacement les couleurs d'accentuation audacieuses des couleurs de surface neutres. L'inclusion de rôles d'accentuation primaire, secondaire et tertiaire dans le système permet non seulement d'améliorer les possibilités d'expression, mais aussi de contrôler plus précisément la hiérarchie visuelle grâce à des choix de couleurs distincts. Cette utilisation intentionnelle de la couleur garantit une expérience cohérente et cohérente dans l'interface utilisateur de la montre, même avec la thématisation.
Exemple de différentes mises en page, composants et UI dans différents thèmes, tout en conservant un contraste de couleurs adéquat.
Associer et superposer des couleurs
Pour préserver l'accessibilité visuelle, n'appliquez les couleurs que dans les paires de jetons de couleur prévues. Une combinaison de couleurs inappropriée peut endommager le contraste nécessaire à l'accessibilité visuelle, en particulier lorsque les couleurs sont ajustées à l'aide d'une couleur dynamique.
Associer et superposer correctement les couleurs
Pour garantir des visuels et une accessibilité appropriés, assurez-vous de mapper le bon jeton à la bonne position. Un mappage des couleurs incorrect peut entraîner des visuels involontaires et nuire à l'accessibilité.
check_circle
À faire
Associez et superposez correctement les rôles de couleur pour assurer une visibilité et une accessibilité appropriées.
Dans cet exemple, les boutons avec (2) on-primary sur (1) primary ou (4) on-primary-container sur (3) primary-container restent lisibles à mesure que le niveau de contraste change et ont une note AAA avec un rapport de contraste de 7:1 ou plus.
cancel
À éviter
Des mappages de couleurs inappropriés peuvent entraîner des visuels involontaires et compromettre l'accessibilité.
Dans cet exemple, les boutons avec (2) primary-container sur (1) primary ou (4) primary-dim sur (3) primary-container deviennent illisibles à mesure que les niveaux de contraste changent et ne respectent pas le rapport de contraste minimal de 7:1 pour le texte normal. Ces niveaux de contraste s'appliquent aux rôles principaux, secondaires et tertiaires.
Associations de couleurs recommandées
Principal + dimension principale
Utilisez "Primary" pour les actions principales et "Primary-Dim" pour les éléments complémentaires. Cela crée de la profondeur tout en assurant que l'action principale se démarque.
Primary-Dim + Tertiary
Utilisez Primary-Dim pour mettre en évidence des éléments importants et Tertiary pour fournir des commentaires remarquables, tels que des réponses aux pressions.
Primary + Secondary-Container
Utilisez Secondary-Container pour les contenus moins importants, tandis que Primary est appliqué aux éléments clés pour qu'ils se démarquent et attirent l'attention.
Principal + Principal-Container
Utilisez "Primary" pour les actions principales et "Primary-Container" pour les éléments complémentaires ou secondaires. Cela crée de la profondeur tout en veillant à ce que l'action principale se démarque.
Primary-Dim + Tertiary-Dim
Utilisez Primary-Dim pour mettre en évidence des éléments importants et Tertiary-Dim pour fournir des commentaires remarquables, comme un objectif atteint.
Tertiaire + Principal + Conteneur secondaire
Lorsque l'action principale n'est pas claire, utilisez une combinaison de couleurs tertiaire et primaire pour les actions principales, et de couleurs secondaire-conteneur pour les actions complémentaires.
Secondaire + Conteneur principal
Utilisez Primary-Dim et Secondary lorsque vous souhaitez afficher deux options ou conteneurs tout aussi importants, mais avec un contraste entre les deux.
Principal + Tertiaire + Principal-Container
Lorsque l'action principale n'est pas claire, utilisez une combinaison de couleurs tertiaire et primaire pour les actions principales, et de primaire-conteneur pour les actions complémentaires.
Principale + Dim tertiaire
Utilisez "Principal" pour les actions principales et "Principale dimension" pour les éléments complémentaires. Cela crée de la profondeur tout en faisant ressortir l'action principale.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Apply color\n\nMaterial 3 Expressive for Wear OS establishes visual hierarchy by assigning\ndifferent hue, chroma, and tone values to its color roles, effectively\ndistinguishing bold accent colors from neutral surface colors. The system's\ninclusion of primary, secondary, and tertiary accent roles not only enhances\nexpressive possibilities but also offers more granular control over visual\nhierarchy through distinct color choices. This intentional use of color ensures\na consistent and cohesive feel within the Watch UI, even with theming.\nExample of different layouts, components and UIs in various themes, but\nstill maintaining adequate color contrast.\n\nPair and layer colors\n---------------------\n\nTo maintain visual accessibility, apply colors only in the intended pairs color\ntokens. Combining colors improperly may break contrast necessary for visual\naccessibility, particularly when colors are adjusted through dynamic color.\n\n### Pair and layer colors correctly\n\nIn order to ensure proper visuals and accessibility, make sure you are mapping\nthe correct token to its correct position. An improper color mapping can lead to\nunintended visuals and break accessibility. \ncheck_circle\n\n### Do\n\n**Pair and layer color roles correctly to ensure proper\nvisuals and accessibility.**\n\nIn this example, buttons with (2)\n**on-primary** on (1) **primary** or (4) **on-primary** -container\non (3) **primary-container** stay legible as the contrast level changes\nand have an AAA rating with a contrast ratio of 7:1 or more. \ncancel\n\n### Don't\n\n**Improper color mappings can lead to unintended visuals\nand break accessibility.**\n\nIn this example, buttons with (2)\n**primary-container** on (1) **primary** or (4) **primary-dim** on\n(3) **primary-container** become illegible as contrast levels shift and\ndon't follow the 7:1 contrast ratio minimum for normal text. These contrast\nlevels apply to primary, secondary and tertiary roles.\n\n### Recommended color pairings\n\n\n**Primary + Primary Dim**\n\nUse Primary for main actions, and Primary-Dim for complementary items. This\ncreates depth while ensuring the primary action stands out. \n\n**Primary-Dim + Tertiary**\n\nUse Primary-Dim to highlight important elements and Tertiary to provide standout\nfeedback, such as tap responses. \n\n**Primary + Secondary-Container**\n\nUse Secondary-Container for less prominent content, while Primary is applied to\nkey elements to ensure they stand out and grab attention.\n\n\u003cbr /\u003e\n\n\n**Primary + Primary-Container**\n\nUse Primary for main actions, and Primary-Container for complementary or\nsecondary items. This creates depth while ensuring the primary action stands\nout. \n\n**Primary-Dim + Tertiary-Dim**\n\nUse Primary-Dim to highlight important elements and Tertiary-Dim to provide\nstandout feedback, such as a goal being met. \n\n**Tertiary + Primary + Secondary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Secondary-Container for a complementary actions.\n\n\u003cbr /\u003e\n\n\n**Secondary + Primary-Container**\n\nUse Primary-Dim and Secondary when you want to show two equally as important\noptions or containers, but still have contrast between the two. \n\n**Primary + Tertiary + Primary-Container**\n\nWhen it's not clear what the main action is, use a combination of Tertiary and\nPrimary for a main actions and Primary-Container for a complementary actions. \n\n**Primary + Tertiary-Dim**\n\nUse Primary for main actions and Primary Dim for complementary items. This\ncreates depth while helping the primary action to stand out.\n\n\u003cbr /\u003e"]]
