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?

2 comments

2 Comments

lee_barnes702d 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.

emmar752d 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.