Stay organized with collections
Save and categorize content based on your preferences.
Material 3 Expressive for Wear OS establishes visual hierarchy by assigning
different hue, chroma, and tone values to its color roles, effectively
distinguishing bold accent colors from neutral surface colors. The system's
inclusion of primary, secondary, and tertiary accent roles not only enhances
expressive possibilities but also offers more granular control over visual
hierarchy through distinct color choices. This intentional use of color ensures
a consistent and cohesive feel within the Watch UI, even with theming.
Example of different layouts, components and UIs in various themes, but
still maintaining adequate color contrast.
Pair and layer colors
To maintain visual accessibility, apply colors only in the intended pairs color
tokens. Combining colors improperly may break contrast necessary for visual
accessibility, particularly when colors are adjusted through dynamic color.
Pair and layer colors correctly
In order to ensure proper visuals and accessibility, make sure you are mapping
the correct token to its correct position. An improper color mapping can lead to
unintended visuals and break accessibility.
check_circle
Do
Pair and layer color roles correctly to ensure proper
visuals and accessibility.
In this example, buttons with (2)
on-primary on (1) primary or (4) on-primary-container
on (3) primary-container stay legible as the contrast level changes
and have an AAA rating with a contrast ratio of 7:1 or more.
cancel
Don't
Improper color mappings can lead to unintended visuals
and break accessibility.
In this example, buttons with (2)
primary-container on (1) primary or (4) primary-dim on
(3) primary-container become illegible as contrast levels shift and
don't follow the 7:1 contrast ratio minimum for normal text. These contrast
levels apply to primary, secondary and tertiary roles.
Recommended color pairings
Primary + Primary Dim
Use Primary for main actions, and Primary-Dim for complementary items. This
creates depth while ensuring the primary action stands out.
Primary-Dim + Tertiary
Use Primary-Dim to highlight important elements and Tertiary to provide standout
feedback, such as tap responses.
Primary + Secondary-Container
Use Secondary-Container for less prominent content, while Primary is applied to
key elements to ensure they stand out and grab attention.
Primary + Primary-Container
Use Primary for main actions, and Primary-Container for complementary or
secondary items. This creates depth while ensuring the primary action stands
out.
Primary-Dim + Tertiary-Dim
Use Primary-Dim to highlight important elements and Tertiary-Dim to provide
standout feedback, such as a goal being met.
Tertiary + Primary + Secondary-Container
When it's not clear what the main action is, use a combination of Tertiary and
Primary for a main actions and Secondary-Container for a complementary actions.
Secondary + Primary-Container
Use Primary-Dim and Secondary when you want to show two equally as important
options or containers, but still have contrast between the two.
Primary + Tertiary + Primary-Container
When it's not clear what the main action is, use a combination of Tertiary and
Primary for a main actions and Primary-Container for a complementary actions.
Primary + Tertiary-Dim
Use Primary for main actions and Primary Dim for complementary items. This
creates depth while helping the primary action to stand out.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-20 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"]]
