A color contrast check that should have been easy took me three days to fix

I was updating a client's website menu last week, just changing some button colors to match their new brand guide. The new green looked fine to me, and I ran it through a basic contrast checker against white text. It passed, so I moved on. The problem came when a user with low vision emailed support saying they couldn't read the menu text at all on their specific monitor settings. I went back and tested the same green against off-white backgrounds and lighter grays used elsewhere on the site, and it failed badly. I had to go back to the client, get approval for a darker shade, and then update every single instance across the site's components. What I thought was a 20 minute job turned into three full days of rework and testing. It really showed me that checking one color pair isn't enough, you have to test the whole context. Has anyone else had a simple color swap blow up like that?

2 comments

2 Comments

veraramirez7d ago

Ugh, that's the worst. I've been there, and @rowan_anderson is totally right about testing the real page. My hard lesson was with brand blue on a photo banner. It passed the checker on a solid color, but the actual banner had a light spot in the image, making the text disappear. Now I make a checklist of every background color or image that element touches, even subtle gradients, and test them all. It adds time upfront but saves those brutal days of rework later.

rowan_anderson7d ago

Always test colors on the actual page with a real browser zoomed to 400%. That green might pass on a pure white mockup but look totally different over a light gray image background or in the site's real header. I had a navy button that passed contrast until someone used Windows High Contrast Mode and it just vanished. Now I check the main color pairs AND throw a color blindness simulator on the whole live page before I call it done.