To draw attention to important elements, use strong color contrast between them. For example, a purple background contrasting sharply with a white surface emphasizes the list of item choices—the main focus of this travel app screen.

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 

Increasing the color contrast between a surface or element and its surroundings makes that element more visually prominent, helping communicate hierarchy and draw attention. This emphasis can be created through contrasting adjacent surfaces, combining changes in color and shape, limiting color elsewhere, or using contrast to distinguish text.

Arizona State University

University of Michigan - Ann Arbor

Google

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