Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bei Material 3 Expressive für Wear OS wird eine visuelle Hierarchie durch Zuweisen verschiedener Farbton-, Farbsättigungs- und Farbtonwerte zu den Farbrollen festgelegt, um ausdrucksstarke Akzentfarben effektiv von neutralen Oberflächenfarben zu unterscheiden. Die Einbeziehung von primären, sekundären und tertiären Akzentrollen im System erweitert nicht nur die Ausdrucksmöglichkeiten, sondern bietet auch eine detailliertere Kontrolle über die visuelle Hierarchie durch unterschiedliche Farbauswahl. Diese bewusst gewählte Farbgebung sorgt für ein einheitliches und harmonisches Erscheinungsbild der Smartwatch-Benutzeroberfläche, auch bei der Verwendung von Designs.
Beispiel für verschiedene Layouts, Komponenten und UIs in verschiedenen Designs, die aber einen ausreichenden Farbkontrast aufweisen.
Farben kombinieren und überlagern
Verwenden Sie Farben nur in den vorgesehenen Farb-Token-Paaren, um die visuelle Barrierefreiheit zu erhalten. Eine falsche Farbkombination kann den für die visuelle Barrierefreiheit erforderlichen Kontrast beeinträchtigen, insbesondere wenn Farben durch dynamische Farbgebung angepasst werden.
Farben richtig kombinieren und überlagern
Damit die visuelle Darstellung und Barrierefreiheit ordnungsgemäß sind, müssen Sie das richtige Token der richtigen Position zuordnen. Eine falsche Farbzuordnung kann zu unerwünschten visuellen Elementen führen und die Barrierefreiheit beeinträchtigen.
check_circle
Dos
Farbrollen richtig kombinieren und überlagern, um für eine gute visuelle Darstellung und Barrierefreiheit zu sorgen
In diesem Beispiel bleiben Schaltflächen mit (2) on-primary auf (1) primary oder (4) on-primary-Container auf (3) primary-container bei sich änderndem Kontrastniveau lesbar und haben eine AAA-Bewertung mit einem Kontrastverhältnis von mindestens 7:1.
cancel
Don'ts
Falsche Farbzuordnungen können zu unbeabsichtigten visuellen Elementen führen und die Barrierefreiheit beeinträchtigen.
In diesem Beispiel sind Schaltflächen mit (2) primary-container auf (1) primary oder (4) primary-dim auf (3) primary-container nicht mehr lesbar, da sich die Kontraststufen ändern und nicht dem Mindestkontrastverhältnis von 7:1 für normalen Text entsprechen. Diese Kontraststufen gelten für primäre, sekundäre und tertiäre Rollen.
Empfohlene Farbkombinationen
Primär + Primäre Dimension
Verwenden Sie „Primär“ für Hauptaktionen und „Primär-Dim“ für ergänzende Elemente. Dadurch entsteht Tiefe und die primäre Aktion sticht hervor.
Primäre Dimension + Tertiäre Dimension
Verwenden Sie „Primär-Dim“ zum Hervorheben wichtiger Elemente und „Teritär“, um Feedback hervorzuheben, z. B. Tippaktionen.
Primärer + sekundärer Container
Verwenden Sie Secondary-Container für weniger wichtige Inhalte. Primary wird auf wichtige Elemente angewendet, damit sie auffallen und die Aufmerksamkeit auf sich ziehen.
Primär + Primär-Container
Verwenden Sie „Primär“ für Hauptaktionen und „Primär-Container“ für ergänzende oder sekundäre Elemente. Dadurch entsteht Tiefe und die primäre Aktion sticht hervor.
Primär-Dim + Tertiär-Dim
Verwenden Sie „Primäre Dimension“, um wichtige Elemente hervorzuheben, und „Tertiäre Dimension“, um aussagekräftiges Feedback zu geben, z. B. wenn ein Zielvorhaben erreicht wurde.
Tertiärer + primärer + sekundärer Container
Wenn nicht klar ist, was die Hauptaktion ist, verwenden Sie eine Kombination aus tertiären und primären Containern für Hauptaktionen und sekundäre Container für ergänzende Aktionen.
Sekundärer + primärer Container
Verwenden Sie „Primär-Dim“ und „Sekundär“, wenn Sie zwei gleich wichtige Optionen oder Container anzeigen möchten, aber trotzdem einen Kontrast zwischen ihnen haben möchten.
Primär- + Tertiär- + Primärcontainer
Wenn nicht klar ist, was die Hauptaktion ist, verwenden Sie eine Kombination aus „Terziär“ und „Primär“ für die Hauptaktion und einen „Primär-Container“ für ergänzende Aktionen.
Primäre + Tertiäre Dimension
Verwenden Sie „Primär“ für Hauptaktionen und „Primäre Dimension“ für ergänzende Elemente. Dadurch entsteht Tiefe und die primäre Aktion kommt besser zur Geltung.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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"]]
