How to Choose Colors for Glassmorphism | Making Transparent Surfaces Clear and Readable

Glassmorphism is a visual style that combines semi-transparent surfaces, background blur, and subtle borders to create a glass-like sense of depth. Simply increasing transparency can make text and interactive elements blend into the background as well. This article explains how to separate the roles of the backdrop, glass surface, text, and buttons so the interface can keep a transparent feel without sacrificing clarity.

Choose the backdrop brightness first, then place the glass surface over it

With glassmorphism, it is easier to control the palette when you choose the colors behind the glass before tuning the glass surface itself. As an example, use a gradient from dark navy ■#1F3040 to muted plum ■#4B3D58. Then place a translucent surface containing 12% white over that dark background so the underlying colors remain visible while the card becomes slightly lighter.

.page {
  background:
    linear-gradient(
      135deg,
      rgb(31 48 64),
      rgb(75 61 88)
    );
}

.glass-card {
  color: rgb(255 255 255);
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 28%);
  backdrop-filter: blur(18px);
}

The CSS backdrop-filter property applies visual effects such as blur to the area behind an element, and the element or its background needs to be transparent or partially transparent for that effect to be visible. In this specific example, where the backdrop is only the fixed two-color gradient, compositing 12% white over the two gradient endpoints gives white-text contrast ratios of about 9.25:1 and 7.02:1. If a photo or another element appears behind the card, however, the real colors change, so these numbers cannot be reused for a different backdrop.

Treat the glass surface, text, and buttons as separate color roles

1. Keep the glass surface lightly opaque so the backdrop remains visible

For a translucent white surface, a practical starting range is around 10–20% opacity, then adjust until the backdrop still shows through clearly. The 12% value above is not a standards-based recommendation; it is simply a design starting point that keeps the background visible while giving the surface a distinct presence. A border using 28% white can add a glass-like edge, but because the final contrast depends on the colors behind it, do not rely on that translucent line alone to identify an important control.

2. Measure text against the final composited background, not the declared glass color

If the backdrop stays dark, white ■#FFFFFF can be a candidate for headings and body text. If the glass card may move over a bright part of a photo, though, the white-text contrast can drop. When you need a stable text surface, place an opaque dark blue-gray ■#28313C behind the text. Its contrast ratio with white is about 13.17:1. This separates the decorative transparency from the surface used for reading.

3. Make the primary button opaque so the action does not depend on the backdrop

If the primary button is also translucent, its visibility changes with whatever sits behind it. Use an opaque teal ■#2A6272 for the action and white ■#FFFFFF for the button text; their contrast ratio is about 6.80:1. Let the glass surface group content visually, while the primary button keeps a clearly defined interaction role.

Prioritize identification over transparency, and check the rendered result

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. Visual information needed to identify user interface components also needs at least 3:1 contrast against adjacent colors. Because translucent borders and glass surfaces change with the colors behind them, fixed HEX-to-HEX ratios alone are not enough to evaluate them.

When background images, viewport width, or scroll position can change, check the actual places where text and controls overlap the backdrop. If the result is unstable, add opaque text surfaces, buttons, or boundaries and give each role a more predictable color. In HueRoll, you can enter six-digit HEX colors, review related colors and palette suggestions, and compare the selected color with white or black. HueRoll does not evaluate the composited color at every point of a translucent surface, compare arbitrary custom color pairs, or automatically determine WCAG AA or AAA conformance, so the final glassmorphism design still needs separate checking in the rendered interface.