Skip to main content

Building Flexible Components With Transparency

By Paul Hebert

Published on November 19th, 2020

Topics

By adding a touch of transparency, we can design components that automatically adapt to their backgrounds.

A panel component superimposed in 3D over a colorful gradient background. The panel header has a transparent background and reads "Building Flexible Components With Transparency". The panel body has a white background. Lines representing text are cut through the background allowing you to see the gradient below.

I often design components that will be used in a wide variety of contexts. Several times I’ve designed a component on a white background and then run into issues when trying to use that same component on gray or colored backgrounds. For example, take this panel:

The panel is using a subtle gray (#ddd) to draw a border between its contents and the surrounding page. But when the page background gets closer to #ddd, the design doesn’t work as well.

Using transparency, we can keep the same effect on white backgrounds while ensuring increased contrast on other backgrounds. Here I use a black color set to 0.135 opacity instead: rgba(0, 0, 0, 0.135). This matches #ddd on white backgrounds but automatically appears darker on other backgrounds:

This technique also works well on lightly colored backgrounds. The panel will pick up the underlying colors and display them through the transparent black:

Things get even more interesting when we use our panels on gradient, pattern, or image backgrounds:

Text colors can also be made more flexible by adding a touch of transparency. This is much subtler than our previous examples since the text needs to contrast strongly against the background, but you can see the text is slightly saturated with the background color.

This can also be used to increase the contrast of text colors. Sometimes designs call for gray text on white backgrounds. When these text colors are reused on darker backgrounds they can lose contrast and become inaccessible. By using a transparent black instead of a gray we can increase the contrast on non-white backgrounds:

This technique can be really fun and flexible but there are a few caveats to be aware of:

  1. When using transparency it can be easy to end up with combos that don’t have an accessible contrast level. Be sure to check that you’re following the WCAG contrast guidelines whenever using this technique. (And remember the guidelines are minimum requirements not goals.)
  2. This technique works best when using a transparent black or white. If you were to use a transparent blue over a pink background, the blue could quickly begin to feel muddy and desaturated.

As long as you’re aware of those caveats this can be a really useful technique. Instead of creating a bunch of different context-specific component variations, you can create one variation that adapts to different backgrounds.