To bring attention to important events, use stronger color contrasts between elements.

E.g. The purple background has a high contrast with the white surface
- Bringing emphasis to the list of item choices 
- The main point of this travel app.

Surface Contrast Between Elements

A grayscale color palette is best to stand out in:
- Photography
- Texts

Make Text Stand Out with Surface Contrast 

By limiting the use of color in your app, the areas that do receive color gain more attention, including:
- Text
- Images
- Individual elements like buttons

i.e. Because the content of this product is multicolored, a black floating action button contrasts greatly with the bright colors, making it more visible.

Limiting Color in Surface Contrast 


Visual emphasis is given to an element that changes both color and shape at the same time.
- Use this kind of emphasis to indicate something has been selected or requires immediate attention. 
- E.g. The chips with curved, pink left corners indicate they have been selected by the user.

Color and Shape with Surface Contrast 

To bring attention to important events, use stronger color contrasts between elements.

- Surface Contrast
- Color and Shape
- Limiting Color
- Make text stand out 

Arizona State University

University of Michigan - Ann Arbor

In Material Design, color draws attention to specific elements on-screen. When an element’s color contrasts with its surroundings, that element stands out, so users can tell it’s important. Because color themes vary:
- bold and bright, 
- monochromatic or muted

For example, 
- Black icons stand out when they are placed against a white background
- Multicolored cards draw attention to themselves when placed next to monochromatic colors

Learn Before

Related

Learn After