Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Material 3 Ekspresif untuk Wear OS menetapkan hierarki visual dengan menetapkan
nilai hue, kroma, dan tone yang berbeda ke peran warnanya, yang secara efektif
membedakan warna aksen yang berani dari warna permukaan netral. Penyertaan
sistem peran aksen primer, sekunder, dan tersier tidak hanya meningkatkan
kemungkinan ekspresif, tetapi juga menawarkan kontrol yang lebih terperinci atas hierarki
visual melalui pilihan warna yang berbeda. Penggunaan warna yang disengaja ini memastikan
nuansa yang konsisten dan kohesif dalam UI Watch, bahkan dengan tema.
Contoh tata letak, komponen, dan UI yang berbeda dalam berbagai tema, tetapi
tetap mempertahankan kontras warna yang memadai.
Warna pasangan dan lapisan
Untuk mempertahankan aksesibilitas visual, terapkan warna hanya dalam token warna
pasangan yang diinginkan. Menggabungkan warna secara tidak tepat dapat merusak kontras yang diperlukan untuk aksesibilitas
visual, terutama saat warna disesuaikan melalui warna dinamis.
Mencocokkan dan melaparkan warna dengan benar
Untuk memastikan visual dan aksesibilitas yang tepat, pastikan Anda memetakan
token yang benar ke posisi yang benar. Pemetaan warna yang tidak tepat dapat menyebabkan
visual yang tidak diinginkan dan merusak aksesibilitas.
check_circle
Anjuran
Pasangkan dan susun peran warna dengan benar untuk memastikan visual dan aksesibilitas yang tepat.
Dalam contoh ini, tombol dengan (2)
on-primary di (1) primary atau (4) penampung on-primary
di (3) primary-container tetap dapat dibaca saat tingkat kontras berubah
dan memiliki rating AAA dengan rasio kontras 7:1 atau lebih.
cancel
Larangan
Pemetaan warna yang tidak tepat dapat menyebabkan visual yang tidak diinginkan
dan merusak aksesibilitas.
Dalam contoh ini, tombol dengan (2)
primary-container di (1) primary atau (4) primary-dim di
(3) primary-container menjadi tidak terbaca karena tingkat kontras berubah dan
tidak mengikuti rasio kontras minimum 7:1 untuk teks normal. Tingkat kontras
ini berlaku untuk peran primer, sekunder, dan tersier.
Kombinasi warna yang direkomendasikan
Utama + Dimensi Utama
Gunakan Primary untuk tindakan utama, dan Primary-Dim untuk item pelengkap. Hal ini
akan menciptakan kedalaman sekaligus memastikan tindakan utama terlihat jelas.
Dimensi Utama + Tersier
Gunakan Primary-Dim untuk menyoroti elemen penting dan Tersier untuk memberikan
masukan yang menarik, seperti respons ketuk.
Penampung Utama + Sekunder
Gunakan Secondary-Container untuk konten yang tidak terlalu penting, sedangkan Primary diterapkan ke
elemen utama untuk memastikannya terlihat menarik dan menarik perhatian.
Primary + Primary-Container
Gunakan Primary untuk tindakan utama, dan Primary-Container untuk item pelengkap atau
sekunder. Hal ini menciptakan kedalaman sekaligus memastikan tindakan utama tampil
beragam.
Primary-Dim + Tertiary-Dim
Gunakan Primary-Dim untuk menyoroti elemen penting dan Tertiary-Dim untuk memberikan
masukan yang menarik, seperti sasaran yang tercapai.
Penampung Tersier + Primer + Sekunder
Jika tindakan utamanya tidak jelas, gunakan kombinasi Tersier dan Utama untuk tindakan utama dan Penampung Sekunder untuk tindakan pelengkap.
Penampung Sekunder + Primer
Gunakan Primary-Dim dan Secondary jika Anda ingin menampilkan dua opsi atau penampung yang sama pentingnya, tetapi masih memiliki kontras di antara keduanya.
Utama + Tersier + Penampung Utama
Jika tindakan utamanya tidak jelas, gunakan kombinasi Tersier dan Utama untuk tindakan utama dan Penampung Utama untuk tindakan pelengkap.
Primary + Tertiary-Dim
Gunakan Utama untuk tindakan utama dan Dimensi Utama untuk item pelengkap. Hal ini
akan menciptakan kedalaman sekaligus membantu tindakan utama terlihat lebih menarik.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 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"]]
