An icon can look clear in a component preview and become difficult to see when the background changes.

In our test, the same download icon went from a minimum sampled contrast of 4.42:1 on a light background to 1.04:1 on a dark background . Its SVG, color and size stayed the same.

The difference came from the translucent card behind it.

We tested five backgrounds, then applied a simple correction: an opaque white surface behind the icon, while keeping the rest of the card translucent.

One icon, five backgrounds

We used the Download icon from Lucide on SVGicons , by Lucide Contributors, under the ISC license .

Every scene uses the same settings:

Icon: 32 × 32 pixels, colored #64748b

Button: 48 × 48 pixels

Card background: white at 38% opacity

Backdrop blur: 12 pixels

SVG geometry and card layout: unchanged

The original button has a transparent background. The corrected version adds an opaque white background to that button.

1.…