[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Color\n\nMaterial design for Wear OS uses a darker color palette. In particular, you must\nuse a black background for your app and tile.\n\nColor scheme\n------------\n\nThe Wear OS color scheme is created based on the baseline\n[Material Design color theme](https://material.io/design/color/the-color-system.html).\nYou can use that theme as-is, or customize for your app.\n\nThis theme includes default colors for:\n\n- Primary and secondary colors\n- Variants of primary and secondary colors\n- Additional UI colors, such as colors for backgrounds, surfaces, errors, typography, and iconography\n\nDark theme\n----------\n\nAll dark-theme colors should display elements with sufficient contrast, meeting\n[WCAG's AA standard](https://www.w3.org/WAI/standards-guidelines/wcag/)\nof at least 4.5:1 for body text when applied to all\nelevation surfaces.\n\n### Use desaturated colors for accessibility\n\nA dark theme should avoid using saturated colors, as they don't meet WCAG's\naccessibility standard of at least 4.5:1 for body text against dark surfaces.\nSaturated colors also produce optical vibrations against a dark background,\nwhich can cause eye strain. Instead, use desaturated colors as a more legible\nalternative.\n\n**Figure 1.** Less saturated colors from your color palette improve legibility.\n\n**Figure 2.** Avoid using saturated colors on a dark background.\n\n### Primary color\n\nA primary color is the color displayed most frequently across your app's screens\nand components. The baseline Material Design dark theme uses the 200 tone as a\nprimary color. This meets the WCAG's AA standard of at least 4.5:1 for normal\ntext, at all elevation surfaces.\n\n**Figure 3.** A sample primary palette in a dark theme.\n1. Primary color indicator\n2. Tonal variants\n\n### Secondary color\n\nA secondary color can be used to accent specific parts of your UI. In a dark\ntheme, a secondary color can be desaturated to meet the 4.5:1 contrast level.\n\nIn figure 4, 1) indicates a secondary color indicator, and 2) indicates tonal\nvariants.\n\n**Figure 4.** A sample secondary palette in a dark theme.\n\n### Accent color\n\nIn a dark theme, dark surfaces occupy the majority of the UI. Accent colors are\ntypically light (desaturated pastels) or bright (saturated, vivid colors). This\nhelps accented elements stand out. Use accent colors sparingly to accent key\nelements, such as text or buttons.\n\n**Finding accent colors**\nUse the\n[color palette generator](https://material.io/design/color/the-color-system.html#tools-for-picking-colors) to create or view a color theme. The color palette generator\nalso creates tonal palettes, which are a range of light to dark color\nvariations, created from your primary and secondary colors. Select variations of\nthese for your dark theme.\n\nIn figure 5, 1) indicates a default theme primary color indicator and 2)\nindicates a dark theme primary color indicator.\n\n**Figure 5.** To provide more flexibility and usability in a dark theme, it's recommended to use lighter tones (200-50), rather than saturated tones (900-500).\n| **Note:** To derive different colors from a source color, adjust the brightness value of the source color.\n\nUse the darker spectrum of colors for large parts of the UI, such as the\nbackground color. Reserve lighter colors for accents and UI elements."]]
