Building Flexible Components With Transparency
I sometimes forget that transparent colours can solve certain contrast and design issues like the following:
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: