Create color schemes

Create color schemes that include darker and lighter variations of your primary and secondary colors.

Test accessibility

Check if text is accessible on different-colored backgrounds, as measured using the Web Content Accessibility Guidelineslegibility standards.

Preview your UI in color

Preview the look of your color scheme across a range of Material Design components, with editable HTML, CSS, or JavaScript in Codepen.

In Material Design, a primary color refers to a color that appears most frequently in your app. A secondary color refers to a color used to accent key parts of your UI.

Using colors from the Material Design palette is optional.

A primary color is the color displayed most frequently across your app’s screens and components. It can also be used to accent elements, if you don’t have a secondary color.

To create contrast between elements, you can use lighter or darker tones of your primary color. The contrast between lighter and darker tones helps show division between surfaces, such as between the status bar and a toolbar.

Secondary Color

A secondary color is used to accent select parts of your UI. It can be complementary or analogous to your primary color, but it should not simply be a light or dark variation of your primary color. It should contrast with elements that surround it and be applied sparingly as an accent.

Secondary colors are best used for:

• Buttons, floating action buttons, and button text
• Text fields, cursors, and text selection
• Progress bars
• Selection controls, buttons, and sliders
• Links
• Headlines

Using a secondary color is optional. It’s not necessary if you use variations of your primary color to accent elements.

Using color in your app

Large UI areas and elements should be colored with your primary color. A secondary color can be used to accent smaller areas. If you don’t have a secondary color, you can use your primary color instead for these areas.

Use the primary color to accent elements, such as buttons or checkboxes.

Elements that appear rarely, such as alerts, should be distinct from other elements and not use your primary color.

Secondary colors, and anything used to accent parts of the UI, should be used sparingly.

See the Color Tool for more guidance about typographic legibility on color.

Alternative secondary colors

If your secondary color is too light or dark to sufficiently contrast with the background color, use a lighter or darker shade of the secondary color instead.

Hierarchy

Hierarchy refers to organizing content according to different levels of importance. Color can convey how important some content is relative to other content.

For example, a brightly colored button on a colorless background makes that button stand out. Alternatively, colorless bars and buttons allow bright content to take prominence in a UI.

Meaning

Color may be used to communicate the meaning of various elements on a screen. A weather app may display colors that indicate current weather conditions, and a maps app may use color to show traffic conditions, with roads colored red or green.

State

Color can provide information about:

• An element’s current state, such as if a button is enabled or disabled
• An app or element’s change of state

Color that indicates a change of state should be noticeable, as subtle differences in color may be missed. It’s best to indicate a change of state in more than one way, such as displaying an icon or moving the location of an element.

Contrast

Your app’s primary and secondary colors should ensure sufficient color contrast between elements so that all users can see and use your app.

To learn more about color, contrast, and accessibility design, read Material Design Accessibility.

Text on backgrounds

Text should be legible on the background on which it appears. It is recommended that:

• Dark gray text is used on light backgrounds
• Light gray text is used on dark backgrounds

If your app has both light and dark themes, the text should be available in a contrasting color against each theme.

Legibility

Text that appears on colored backgrounds should be legible and meet accessibility standards. Both backgrounds and text must use colors and opacities that, when used together, meet these standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a contrast ratio of 4.5:1 for normal text and a 3:1 ratio for large text.

Dark text on light backgrounds

The level of opacity used for text depends on whether your background is dark or light. For dark text on light backgrounds, apply the following opacity levels:

• The most important text has an opacity of 87%
• Secondary text, which is lower in the visual hierarchy, has an opacity of 54%
• Text hints (such as text fields and labels) and disabled texthave even lower visual prominence with an opacity of 38%

White text on dark backgrounds

White text appearing on colored backgrounds should do so at an opacity of 100%.

Icons and other elements

Elements like icons benefit from having a hex value of black or white at 38% opacity so that they work on backgrounds of any color.

Colored text and backgrounds

Use colored text on colored backgrounds sparingly, limiting usage to important text elements. Colored text should be used to indicate importance and selective emphasis.

See the Color Tool to determine if certain foreground colors used for typography meet accessibility standards against different background colors.

Light theme

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs

Dark theme

1. Status bar
2. App bar
3. Background
4. Cards/Dialogs