Gradients - Usage

Basic Guidelines

Gradients

Gradients can be used on text, backgrounds and illustrations. They are not to be used for icons, as they are not large enough to contain the differing contrasts. See the Icons documentation for more information.

Accessibility

For text and surfaces that serve as a background for text it is necessary to use the accessible versions of the gradient. The accessible gradients are adjusted to comply with a 3:1 contrast ratio against white, and are therefore only accessible for large fonts (Display-5 or larger). For small text only the colour text-grey should be used.