Spent 3 hours fixing a color contrast issue that should have taken 20 minutes

I was working on a client's signup form last week and kept failing the WCAG AA contrast check on the error messages. The text looked fine to me, but the tool kept saying it was too light against the background. Turned out I was checking the wrong background layer - there was a subtle gradient overlay I completely missed. After digging through the Figma layers for what felt like forever, I finally found the overlay was set to 15% opacity. Has anyone else wasted a ton of time on contrast issues that were hiding in plain sight like that?

2 comments

2 Comments

pipergonzalez1d agoTop Commenter

Oh yeah, I've been there. For me it was a button on a dark mode dashboard that kept failing contrast checks but looked perfect. After two hours I realized the background had a soft radial glow effect from a decorative element underneath. The opacity was like 8% so it was barely visible but it was just enough to throw off the contrast ratio. Now I always grab the background color directly from devtools instead of eyeballing it in the design file. Also learned the hard way to check if there's any box-shadow or backdrop-filter happening on the element itself. Those overlays and subtle effects really sneak up on you.

riley5171d ago

Does devtools let you inspect the actual computed color, or do you just eyedrop it from the page?