Opacity

D-system uses six opacity levels for element transparency.

The opacity property sets the transparency level for an element.

When using opacity, ensure important UI elements like text and icons are legible without compromising the aesthetic.

Example

Name

Opacity

opacity-100

100% transparency of an element

opacity-80

80% transparency of an element
Hover state
backdrop_darkest if applied on color

opacity-64

64% transparency of an element
Pressed state

opacity-48

48% transparency of an element
backdrop_dark if applied on color

opacity-24

24% transparency of an element
backdrop_dim if applied on color

opacity-12

12% transparency of an element

Design

Web

Apps

Accessibility concerns

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

‍WebAIM: Color Contrast Checker
‍MDN Understanding WCAG, Guideline 1.4 explanations
‍Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0