My mentor's 4:1 rule for button text saved my app from WCAG fails

Last fall my old design lead Maria told me to stop eyeballing contrast and literally measure every button against a 4:1 ratio. I thought she was being extra, but after our audit came back with 14 failures out of 60 screens, I finally listened. Turns out my light gray on white was actually 2.8:1 and looked fine on my OLED phone but disappeared on a colleague's older LCD. She made me pair the ratio with real text sizes, not just UI elements, and that caught another 6 issues. Now I run everything through a free contrast checker before I even send Figma links. Has anyone else had a rule of thumb that seemed overkill but ended up being the standard you swear by now?

1 comments

1 Comment

rowan_anderson15d ago

That ratio thing really hits home. I remember reading a piece from a UX guy who had a similar wake up call with his own product, and he said the same thing about older screens and brightness being a huge factor. It's wild how many people just rely on their fancy monitors and never test on gear that's even a few years old. The text size part is what got me though, because a lot of people treat contrast like it's one rule for everything, but a tiny caption and a giant headline are totally different beasts. I've seen so many sites that pass the numbers on paper but are still a pain to read in direct sunlight or on a dimmed screen. It's one of those things that feels like extra work until you actually sit with someone who's squinting at your design, then it all makes sense.