Android Automotive OS インターフェースの中核となるグレースケール パレットに加えて、フォーカスを描画するなどの目的で他の色を控えめに使用することもできます。
現在、Android Automotive OS には公式のアクセント カラーが 1 つあります。青の色合いは、サポート ライブラリでは「車のアクセント」と呼ばれています。彩度と鮮やかさを高めるために、このブルーは標準の Google ブルーから少しシフトしています。これにより、暗い場所でも色が安定しやすくなります。
Android Automotive OS の青色の「車のアクセント」は、標準の Google ブルーよりも彩度が高く、昼夜を問わず、ダークテーマのインターフェースに適したデザインになっています。
[[["わかりやすい","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-25 UTC。"],[[["\u003cp\u003eThe Android Automotive OS color strategy prioritizes a dark theme built from black for consistency and hardware alignment, supporting both day and night driving modes.\u003c/p\u003e\n"],["\u003cp\u003eA minimum contrast ratio of 4.5:1 between background and content like icons or text is crucial for readability and safety.\u003c/p\u003e\n"],["\u003cp\u003eColor usage should be minimal and purposeful, primarily relying on a grayscale palette with the "car accent" blue used sparingly for highlights.\u003c/p\u003e\n"],["\u003cp\u003eTransparency and opacity are utilized to create visual hierarchy, guide focus, and obscure backgrounds with scrims.\u003c/p\u003e\n"],["\u003cp\u003eVisual consistency is maintained by using color strategically across different screens and elements, reinforcing memory and recognition.\u003c/p\u003e\n"]]],[],null,["# Color\n\n\u003cbr /\u003e\n\nThe foundation of the Android Automotive OS color strategy is the idea of \"building from black.\" Basing interface colors on black makes for a more consistent user experience, with no drastic change between day and night themes.\n\nBuilding from black also ensures better alignment with hardware, since dark materials are often used in car interiors and dashboards.\n\n**Guidance at a glance (TL;DR)** \n- Build your color choices from black to support both day and night driving\n- Maintain a contrast ratio of at least 4.5:1 between background and icons or text \n- Use color minimally, with purpose\n- Show elevation via grayscale\n- Use transparency and opacity to guide visual focus\n\n*** ** * ** ***\n\nPalettes and gradients\n----------------------\n\nThe dark theme of the Android Automotive OS interface is based on a grayscale palette. Ideally, any additional colors should be of reduced intensity, as in the dark variants of the colors in the Material Design palettes.\n\nThis section includes palette and opacity information, along with charts providing grayscale values for the elevation levels associated with each component. \n[Material Design\nColor usage and palettes](https://material.io/design/color/the-color-system.html#color-usage-palettes)\n\n### Android Automotive OS grayscale palette\n\nThe Android Automotive OS grayscale palette is used for elements such as text and icons, and it is designed to accommodate the unique requirements of the driving environment.\n\nThis palette needs to be diverse enough to:\n\n- Cover all the different use cases of the dark theme UI\n- Provide enough range to define hierarchy through tonal differences\n\nThis grayscale palette is the main color palette for Android Automotive OS, supporting the dark theme of the interface.\n\nTonal differences create the illusion of depth even on true black backgrounds where shadows are imperceptible. To provide sufficient tonal differences, the Android Automotive OS grayscale palette includes mid-greys. Material Design greys starting from Grey 900 approach brighter colors too quickly; a color two steps lighter would be Grey 700, which is too bright for the auto context.\nThis chart shows the elevation levels at which various components rest. Each elevation level has an associated grey value. This chart shows the grey values associated with various elevation levels in day and night mode\n\n### Accent color\n\nIn addition to the grayscale palette at the core of the Android Automotive OS interface, other colors can be used sparingly for purposes such as drawing focus.\n\nCurrently, Android Automotive OS has one official accent color, a shade of blue referred to in the support library as \"car accent\". To increase saturation and vibrancy, this blue is shifted slightly from the standard Google blue. This shift helps the colors sit more comfortably on a dark surface.\nThe blue \"car accent\" color in the Android Automotive OS is more saturated than the standard Google blue, designed to work well in the dark-themed interface during both day and night driving.\n\n### Opacity-value charts\n\nTransparency conveys a sense of depth and reinforces the Material Design spatial model. To use transparency effectively, choose dark or white opacity values based on your use case.\n\n#### Dark opacity values\n\nThe most common use case for dark opacity values is to create scrims (overlays).\n\n#### White opacity values\n\nThese values are mostly used on text. They are especially effective when the background is colored. Using solid grey on a dark, colored background looks too muddy.\n\nFor examples of how to use opacity in scrims and text hierarchies, see [Guidance and examples](#guidance_and_examples).\n\n*** ** * ** ***\n\nContrast\n--------\n\nTo meet basic Android Automotive OS safety guidelines, the contrast ratio between background and icons or text should be at least 4.5:1. For details of how contrast ratios apply to specific automotive UI elements, see [Make content easy to read](/cars/design/design-foundations/visual-principles#make_content_easy_to_read). \n\n\n**Do**\nMake sure contrast meets a minimum ratio of 4.5:1 for all readable and actionable content\n\n\n**Don't**\nDon't let contrast fall below 4.5:1, reducing driver safety\n\n*** ** * ** ***\n\nGuidance and examples\n---------------------\n\nThe Android Automotive OS dark UI is clean and simple, with minimal use of color. In addition to using the appropriate colors, tones, and opacity values for UI elements (see [Palettes and gradients](#palettes_and_gradients)), it's important to make sure every use of color and color gradients has a purpose.\n\nThis section provides guidance and examples for applying transparency, opacity, and color to achieve a variety of goals. These goals include:\n\n- Obscuring backgrounds\n- Maintaining consistency\n- Establishing a visual hierarchy that draws user focus to primary actions.\n- Distinguishing entities in a list\n\n### Obscuring backgrounds with scrims\n\nFull-screen scrims (overlays) are used to cover backgrounds behind disruptive elements, such as dialogs that require users to take an action. Partial scrims are used to draw attention to the transition of elements such as notifications. \nFull scrim (behind dialog card) in day mode Full scrim (behind dialog card) in night mode \nPartial scrim (behind notification) in day mode Partial scrim (behind notification) in night mode\n\n### Maintaining consistency with color\n\nColor is a powerful cue for reinforcing memory and recognition. Use it to create a coherent experience from screen to screen. \n\n\n**Do**\nMaintain visual continuity by using the same color for an item across multiple views, such as the green color used for the turn-by-turn navigation views here\n\n\n**Do**\nUse color to visually connect related elements and functions, such as the red hang-up CTAs shown here \n\n\n**Do**\nUse the dominant color of album art or an app's assigned color on related elements as a persistent visual affordance. Here, the circle around the pause button is accented with Spotify green.\n\n\n**Don't**\nDon't use different colors to arbitrarily differentiate repeated components within a single screen. Be cautious about using colors when they don't add value -- as is the case with these colored outlines around the summary cards, which duplicate the color of the app icon.\n\n### Establishing a visual hierarchy\n\nUse the white opacity values to create a consistent and strong visual hierarchy. The opacity values of 88, 72, and 56 contain just enough contrast to meet accessibility requirements while creating a comfortable reading environment on a dark background. Use the 96% opacity on all whites for night mode. \n\n\n**Do**\nUse different opacity and contrast values to maintain a visual hierarchy.\n\n\n**Don't**\nDon't overuse full opacity or contrast values by applying them to too many elements. A contrast in opacity values is needed to differentiate primary and secondary information."]]
