Can we talk about how a 5% opacity overlay can ruin a dark theme?

I added a subtle 5% white overlay on my dark gray background for a soft glow effect in my Figma mockup. On my calibrated monitor it looked great, but on my friend's budget laptop screen it just looked like a dirty, washed-out mess. I learned that perceived opacity can shift wildly across different display types. What's a better way to create depth without relying on transparency like that?

2 comments

2 Comments

max3883d ago

Used to think subtle overlays were safe, but that's a solid fix for bad screens.

garcia.miles3d ago

Try using a solid color that's just a tiny bit lighter than your main dark gray. That way it holds up on any screen.