PSA: I just hit 500 failed contrast checks on a single button design

I was working on this app screen for a local bakery's online ordering, using what I thought was a nice dark green (#2E5E3A) on a cream background, and my checker flagged it as failing WCAG AA for normal text (the ratio was 3.8:1). I've been tweaking shades for two days straight and just watched the failure counter tick over to 500 attempts. How do you even start to pick a new color when you're this deep in the weeds?

3 comments

3 Comments

lee_barnes701mo ago

Hold up, you're trying to get dark green on cream to pass for normal text? That's a really tough combo to make work! The brightness levels are just too close. I'd ditch that specific pairing and start with a much darker green, almost black-green, for the text if you're set on the cream background.

beth7191mo ago

Oh man, that's such a good point. @emmar75 is totally right about the real world test. It's easy to forget not everyone sees colors the same way we do. You can get stuck trying to make a tricky combo work when just picking a darker shade fixes everything. Lee's advice to go for an almost black-green is spot on. It keeps the feel you want but actually lets people read it.

emmar751mo ago

Ugh I feel this in my soul. I used to think those checkers were way too strict and just picked what looked good. Then I watched my uncle with bad eyesight try to use a site I made. He straight up couldn't read half of it. That moment flipped a switch for me. Now I start with a color that definitely passes, even if it's not my first pick, and tweak from there. Saves so much headache. Getting that contrast right is more important than the perfect shade.