Color

The foundation of the Android Auto 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.

Building from black also ensures better alignment with hardware, since car makers tend to use dark materials on car interiors, dashboards, and their UI.

Guidance at a glance

  • Build your color choices from black to support both day and night driving
  • Maintain a contrast ratio of at least 4.5:1 between background and icons or text
  • Use color minimally, with purpose
  • Show elevation via grayscale
  • Use transparency and opacity to guide visual focus

Palettes and Gradients

The dark theme for Android Auto 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.

This section includes palette and opacity information, along with charts providing grayscale values for the elevation levels associated with each component.

Android Auto grayscale palette

The Android Auto grayscale palette is used for elements such as text and icons, and it is designed to accommodate the unique requirements of the driving environment.

This palette needs to be diverse enough to:

  • Cover all the different use cases of the dark theme UI
  • Provide enough range to define hierarchy through tonal differences
grayscle color palette
This grayscale palette is the main Android Auto color palette, supporting the dark theme of the interface.

Tonal differences create the illusion of depth even on true black backgrounds where shadows are imperceptible. To provide sufficient tonal differences, the Android Auto 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.

Component elevation chart
This chart shows the elevation levels at which various components rest. Each elevation level has an associated grey value.
Day and night mode greyscale elevation levels
This chart shows the grey values associated with various elevation levels in day and night mode.

Accent color

In addition to the grayscale palette at the core of the Android Auto interfaces, other colors can be used sparingly for purposes such as drawing focus.

Currently, Android Auto 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.

Blue car accent color example
The blue “car accent” color in Android Auto is more saturated than the standard Google blue, designed to work well in the dark-themed interface during both day and night driving.

Opacity-value charts

Transparency 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

Dark opacity values

The most common use case for dark opacity values is to create scrims (overlays).

Black opacity values for overlays

White opacity values

These 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.

White opacity values for text

For examples of how to use opacity in scrims and text hierarchies, see Guidance and examples.


Contrast

Appropriate color contrast helps drivers quickly interpret information and make decisions.

Minimum visual contrast between the foreground (text or icons) and background (colors, album art, etc.) is required for legibility while driving. App colors must meet the WCAG 2.0 Level AA Normal Text contrast requirements, which specify a contrast ratio of 4.5:1). Use a contrast checker, such as the WebAIM Color Contrast Checker, to ensure that your screens meet the contrast requirements.

For more details of how contrast ratios apply to specific UI elements, see Design for Driving guidelines.

Contrast do

Do

These icons follow the color contrast ratio recommendations and are more legible against their backgrounds
Contrast don't

Don’t

These icons do not follow the color contrast ratio recommendations and are difficult to discern against their backgrounds

Guidance and examples

The dark UI for Android Auto 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), it’s important to make sure every use of color and color gradients has a purpose.

This section provides guidance and examples for applying transparency, opacity, and color to achieve a variety of goals. These goals include:

  • Obscuring backgrounds
  • Maintaining consistency
  • Establishing a visual hierarchy that draws user focus to primary actions.
  • Distinguishing entities in a list

Obscuring backgrounds with scrims

Full-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.

Full scrim in day mode
Full scrim (behind dialog card) in day mode
Full scrim in night mode
Full scrim (behind dialog card) in night mode
Partial scrim in day mode
Partial scrim (behind notification) in day mode
Partial scrim in night mode
Partial scrim (behind notification) in night mode

Maintaining consistency with color

Color is a powerful cue for reinforcing memory and recognition. Use it to create a coherent experience from screen to screen.

Visual color recognition

Do

Maintain 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
Visual color continuity

Do

Use color to visually connect related elements and functions, such as the red hang-up CTAs shown here
Persistent app accent color

Do

Use 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.
Color usage restriction

Don’t

Don’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.

Establishing a visual hierarchy

Use 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.

Example of opacity and contrast to maintain visual hierarchy

Do

Use different opacity and contrast values to maintain a visual hierarchy.
Opacity and contrast restriction

Don’t

Don’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.