Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Wear OS için Material 3 Expressive, renk rollerine farklı ton, renk ve ton değerleri atayarak görsel hiyerarşi oluşturur ve koyu vurgu renklerini nötr yüzey renklerinden etkili bir şekilde ayırır. Sistemin birincil, ikincil ve üçüncül vurgu rollerini içermesi yalnızca ifade olanaklarını artırmakla kalmaz, aynı zamanda farklı renk seçenekleri sayesinde görsel hiyerarşi üzerinde daha ayrıntılı kontrol sağlar. Renklerin bilinçli bir şekilde kullanılması, temalar kullanılsa bile İzleme kullanıcı arayüzünde tutarlı ve uyumlu bir his verir.
Farklı temalarda farklı düzenlerin, bileşenlerin ve kullanıcı arayüzlerinin kullanıldığı ancak yeterli renk kontrastının korunduğu örnek.
Renkleri eşleme ve katmanlama
Görsel erişilebilirliği korumak için renkleri yalnızca amaçlanan renk jetonu çiftlerinde uygulayın. Renkleri yanlış bir şekilde birleştirmek, özellikle renkler dinamik renk aracılığıyla ayarlandığında görsel erişilebilirlik için gerekli kontrastı bozabilir.
Renkleri doğru şekilde eşleme ve katmanlama
Doğru görselleri ve erişilebilirliği sağlamak için doğru jetonu doğru konuma eşlediğinizden emin olun. Uygun olmayan renk eşleme, istenmeyen görsellere neden olabilir ve erişilebilirliği bozabilir.
check_circle
Yapılması gerekenler
Doğru görseller ve erişilebilirlik sağlamak için renk rollerini doğru şekilde eşleyin ve katmanlandırın.
Bu örnekte, (1) birincil üzerinde (2) birincilde veya (3) birincil kapsayıcı üzerinde (4) birincilde kapsayıcı bulunan düğmeler, kontrast seviyesi değiştikçe okunaklılığını korur ve 7:1 veya daha yüksek bir kontrast oranına sahip AAA derecelendirmesine sahiptir.
cancel
Yapılmaması gerekenler
Uygun olmayan renk eşlemeleri, istenmeyen görsellere yol açabilir ve erişilebilirliği bozabilir.
Bu örnekte, (1) primary üzerinde (2) primary-container veya (3) primary-container üzerinde (4) primary-dim bulunan düğmeler, kontrast seviyeleri değiştiği ve normal metin için minimum 7:1 kontrast oranı karşılanmadığı için okunamaz hale gelir. Bu kontrast seviyeleri birincil, ikincil ve üçüncül roller için geçerlidir.
Önerilen renk eşleştirmeleri
Birincil + Birincil Boyut
Ana işlemler için birincil, tamamlayıcı öğeler için birincil-karanlık modu kullanın. Bu, birincil işlemin öne çıkmasını sağlarken derinlik oluşturur.
Birincil-Karanlık + Üçüncül
Önemli öğeleri vurgulamak için birincil-koyu, dokunma yanıtları gibi belirgin geri bildirimler sağlamak için üçüncül renkleri kullanın.
Birincil + İkincil Kapsayıcı
Daha az belirgin içerikler için Secondary-Container'ı kullanın. Primary ise öne çıkıp dikkat çekmelerini sağlamak için önemli öğelere uygulanır.
Birincil + Birincil-Kapsayıcı
Ana işlemler için Birincil, tamamlayıcı veya ikincil öğeler için Birincil-Kapsayıcı öğesini kullanın. Bu sayede, birincil işlemin öne çıkması sağlanırken derinlik oluşturulur.
Birincil-Boyut + Üçüncül-Boyut
Önemli öğeleri vurgulamak için birincil karartma, hedefin karşılanması gibi belirgin geri bildirimler sağlamak için üçüncül karartma kullanın.
Üçüncül + Birincil + İkincil Kapsayıcı
Ana işlemin ne olduğu net değilse ana işlemler için Üçüncül ve Birincil, tamamlayıcı işlemler için de İkincil-Kapsayıcı kombinasyonunu kullanın.
İkincil + Birincil-Kapsayıcı
Eşit derecede önemli iki seçenek veya kapsayıcıyı göstermek ancak aralarında kontrast olmasını sağlamak istediğinizde Birincil-Karanlık ve İkincil'i kullanın.
Birincil + Üçüncül + Birincil-Kapsayıcı
Ana işlemin ne olduğu net değilse ana işlemler için Üçüncül ve Birincil, tamamlayıcı işlemler için Birincil-Kapsayıcı kombinasyonunu kullanın.
Birincil + Üçüncü Derece Karartma
Ana işlemler için birincil, tamamlayıcı öğeler için birincil boyutu kullanın. Bu sayede birincil işlemin öne çıkmasına yardımcı olurken derinlik de sağlanır.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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"]]
