A semi-transparent surface and white color makes it hard to see the edges and shape of this floating action button.


University of Michigan - Ann Arbor

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity.

* Displaying shape: **Do**
* Displaying shape: **Don't**

Displaying shape

Material Design Documentation

A colored fill on this floating action button contrasts with the content on the surface behind it, making its surface edges and shape noticeable.


Displaying shape: Do

To enhance user interface visibility, two design changes are suggested for 1Cademy clusters: (1) adding a low-opacity fill to the cluster shape to visually differentiate it from the background, and (2) displaying tags at the top or bottom of the cluster rather than in the background, ensuring tag text remains visible, especially in light mode.

Learn Before

Related

Related