Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Material 3 Expressive per Wear OS stabilisce la gerarchia visiva assegnando valori diversi di tonalità, cromia e tono ai relativi ruoli di colore, distinguendo efficacemente i colori di accento audaci dai colori di superficie neutri. L'inclusione da parte del sistema di ruoli di accento principali, secondari e terziari non solo migliora le possibilità espressive, ma offre anche un controllo più granulare sulla gerarchia visiva tramite scelte di colori distinti. Questo uso intenzionale del colore garantisce un'esperienza coerente e unitaria all'interno dell'interfaccia utente dello smartwatch, anche con i temi.
Esempio di layout, componenti e UI diversi in vari temi, ma mantenendo un adeguato contrasto di colore.
Abbinare e sovrapporre i colori
Per mantenere l'accessibilità visiva, applica i colori solo ai token di colore delle coppie previste. La combinazione di colori in modo improprio potrebbe rompere il contrasto necessario per l'accessibilità visiva, in particolare quando i colori vengono regolati tramite il colore dinamico.
Abbina e sovrapponi i colori correttamente
Per garantire una visualizzazione e un'accessibilità adeguate, assicurati di mappare il token corretto alla sua posizione corretta. Una mappatura dei colori non corretta può portare a immagini indesiderate e compromettere l'accessibilità.
check_circle
Cosa fare
Abbina e sovrapponi correttamente i ruoli dei colori per garantire immagini e accessibilità adeguate.
In questo esempio, i pulsanti con (2)
on-primary su (1) primary o (4) on-primary-container
su (3) primary-container rimangono leggibili man mano che il livello di contrasto cambia
e hanno una classificazione AAA con un rapporto di contrasto di almeno 7:1.
cancel
Cosa non fare
Le mappature dei colori non corrette possono portare a immagini indesiderate e compromettere l'accessibilità.
In questo esempio, i pulsanti con (2)
primary-container su (1) primary o (4) primary-dim su
(3) primary-container diventano illeggibili man mano che i livelli di contrasto cambiano e
non rispettano il rapporto di contrasto minimo di 7:1 per il testo normale. Questi livelli di contrasto si applicano ai ruoli principali, secondari e terziari.
Abbinamenti di colori consigliati
Principale + Dim principale
Utilizza Principale per le azioni principali e Principale-Dim per gli elementi complementari. In questo modo viene creata profondità e allo stesso tempo l'azione principale viene messa in evidenza.
Dim. principale + Terziario
Utilizza Colore principale scuro per evidenziare gli elementi importanti e Colore terziario per fornire un feedback in evidenza, ad esempio le risposte ai tocchi.
Contenitore principale + secondario
Utilizza Secondary-Container per i contenuti meno in evidenza, mentre Primary viene applicato agli elementi chiave per assicurarti che risaltino e attirino l'attenzione.
Principale + Contenitore principale
Utilizza Principale per le azioni principali e Principale-Contenitore per gli elementi complementari o secondari. In questo modo viene creata profondità, garantendo al contempo l'evidenziazione dell'azione principale.
Primary-Dim + Tertiary-Dim
Utilizza Dim principale per evidenziare gli elementi importanti e Dim terziario per fornire un feedback in evidenza, ad esempio il raggiungimento di un obiettivo.
Contenitore terziario + Contenitore principale + Contenitore secondario
Quando non è chiaro quale sia l'azione principale, utilizza una combinazione di Terziario e primario per le azioni principali e Contenitore secondario per le azioni complementari.
Secondario + contenitore principale
Utilizza Dim principale e Secondario quando vuoi mostrare due opzioni o contenitori di uguale importanza, ma mantenere il contrasto tra i due.
Principale + Terziario + Contenitore principale
Quando non è chiaro quale sia l'azione principale, utilizza una combinazione di Terziario e primario per le azioni principali e Contenitore principale per le azioni complementari.
Dim. principale + Dim. terziaria
Utilizza Principale per le azioni principali e Dimensione principale per gli elementi complementari. In questo modo si crea profondità e allo stesso tempo si mette in evidenza l'azione principale.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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"]]
