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.135opacity instead:rgba(0, 0, 0, 0.135). This matches#dddon 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:
