Spent 3 hours fighting a green on green button that I swore was fine

I had a dashboard with a green button on a pale green background. Looked totally fine to me on my monitor. WCAG contrast ratio said 2.8:1 which is way below the 4.5:1 for normal text. I argued with the tool for 45 minutes thinking it was broken. Then I showed it to my coworker on a cheap laptop and he couldn't even see the button existed. Had to darken the green by 40% and add a thin white outline to make it pass. Has anyone else had a color combo that looked good on your screen but failed hard everywhere else?

3 comments

3 Comments

eric_morgan596d ago

Man that's wild but honestly it's the same thing with those energy saving light bulbs that make everything look yellow, you think your outfit matches until you step outside and realize you're wearing two different shades of black.

janahenderson3d ago

Is your toilet paper holder positioned so you can't see the roll but swear you checked it twice?

theabennett6d ago

The 45 minutes of arguing with the tool really got me. I had a similar issue with a blue button on a navy background last year. Thought my eyes were playing tricks on me until I ran the contrast checker three times and it kept saying 2.1:1. I actually emailed the WCAG support team thinking there was a bug in their software. They wrote back and politely explained that no, my monitor brightness was just set to 100% and that was masking the problem. I felt like an idiot. Ended up having to change the button to a pale yellow with dark text just to make it visible on a regular laptop screen.