Found a trick for dark text on busy backgrounds, took 5 minutes to test

I kept failing WCAG checks on a product label because the background photo had too much variance, so I tried adding a subtle white overlay behind the text layer. Ran it through a contrast tool in Figma and it jumped from 2.1 to 4.6 instantly. Anyone else use overlays instead of redoing the whole graphic?

1 comments

1 Comment

reese55113d ago

Got the same problem on a menu board last year. The owner wanted a photo of the beach behind the breakfast items and the sand was light but the water was dark so the text kept bouncing between okay and terrible. I tried a solid box behind the text first but it killed the whole vibe. So I did a white layer at like 30% opacity and only behind the text lines, not the whole image. It took a few tries to get the fade right so it didn't look like a sticker slapped on there. Ended up passing at 4.8 and the client couldn't even tell I changed anything. Overlays are way easier than trying to find a photo that works perfectly. Just gotta make sure the overlay shape follows the text block and doesn't stick out weird.