Opacity describes how solid or transparent an element appears. Lower opacity lets more of the background show through, which can affect contrast and the apparent importance of content.
A sheer curtain lets more light and scenery pass through than a thick one; opacity describes a similar difference in how much background shows.
Understand compositing
An element with partial opacity blends visually with what is behind it. The result depends on both colors and the layers beneath, so the same value can look different on different surfaces. Inspect the rendered combination rather than selecting opacity from a number alone.
Keep text and controls clear
Lowering opacity can reduce contrast for labels, icons, and control boundaries. Do not communicate a disabled state only by fading a control if the text becomes unreadable. Provide an appropriate semantic disabled state and ensure important instructions remain visible.
Use consistent tokens
Repeated opacity values can represent design roles such as overlay strength or muted decoration. Give these roles names and use them consistently. Avoid setting arbitrary opacity on a parent when it unintentionally fades all child content, including text and icons that should remain fully opaque.
Example: a modal overlay
A backdrop can use transparency to dim the page while keeping context visible. Check the overlay on every supported theme and background; a value that works on white may barely change a dark page. Ensure the dialog has enough separation and the background is not interactive while it is open.
Frequently asked questions
Key takeaways
- Opacity blends an element with its actual background.
- Check the resulting contrast in each context.
- Avoid fading important text or controls unintentionally.
- Use named roles for recurring transparency values.