iOS provides materials (or blur effects) that create a translucent effect you can use to evoke a sense of depth. The effect of a material lets views and controls hint at background content without distracting from foreground content. To produce this effect, materials allow background color information to pass through foreground views, while also blurring the background context to maintain legibility.
When you use the system-defined materials, your elements look great in every context, because these effects automatically adapt to the system’s light and dark modes.
TIP Materials require the presence of a visual effect view in your view hierarchy. For developer guidance, see UIVisualEffectView.
Be guided by the materials the system uses. Whenever possible, compare your custom views to system-provided views that enable similar functionality and use the same materials.
Take advantage of the system-provided colors for text, fills, glyphs, and separators. The system-provided colors automatically make these items look great on translucent backgrounds. For guidance, see Dynamic System Colors.
When possible, use SF Symbols. When you use dynamic system colors to color a symbol, or apply a vibrancy effect to it, the symbol looks great in any context. In contrast, full-color images may not have sufficient contrast with the background and may seem out of place when used in a view with a translucent background. For related guidance, see SF Symbols.
System-Defined Materials and Vibrancy
iOS defines materials you can use in specific areas to control the visual separation between the foreground content and the background appearance. The system-provided materials include both light and dark variants that work well against most backgrounds.
For use in content containers, iOS 13 defines four materials that have different levels of translucency (each material also includes a dark variant):
Consider contrast and visual separation when choosing a material. There’s no absolute rule for choosing a material to combine with vibrancy effects. As you’re making this choice, consider that:
- Thicker materials can provide better contrast for text and other elements with fine features
- Translucency can help people retain their context by providing a visible reminder of the content that’s in the background
iOS 13 also defines vibrancy values for labels, fills, and separators that are specifically designed to work with each material. Vibrancy brightens or darkens UI elements by sampling background colors and modifying saturation and value. Vibrant UI elements integrate better with materials and enhance the translucent effect.
Labels and fills each provide several levels of vibrancy; separators have one level. The names of the levels indicate the relative amount of contrast between an element and the background: the default level has the highest contrast, whereas quaternary (when it exists) has the lowest contrast.
Except for quaternary, you can use the following vibrancy values for labels on any material. It's not recommended to use quaternary on thin and ultra thin materials, because the contrast is too low.
You can use the following vibrancy values for fills on all materials.
iOS defines a single, default vibrancy value for separators (separator) that works well on all materials.
Choose a vibrancy effect based on its semantic meaning. Avoid mixing these effects; for example, don’t use a label effect for a separator.