TIL my dark mode text contrast was way off because of a hex code mix up

I was testing a dark theme on my site last night and noticed the gray text on dark gray background felt hard to read. Turned out I had #333 on #1a1a1a which is only like a 4.5 ratio. Swapped the text to #e0e0e0 and now it pops way better at an 8.1 ratio. Has anyone else caught a bad contrast pair late in a project?

2 comments

2 Comments

gavinwood6d ago

4.5 ratio isn't bad actually. That's WCAG AA for normal text. You were technically fine if you weren't going for AAA. I've seen way worse in production sites where people think light gray on dark gray looks "sleek" and end up with a 2.8 ratio that's basically invisible. At least you caught it before launch. Half the sites I browse at night are probably running something like 2.5 and I just assume my screen brightness is too low.

the_aaron6d ago

Why is 4.5 suddenly good enough though? WCAG AA is the bare minimum. It's not a badge of honor. It's like saying your car runs because the tires aren't flat. Sure, it works. But it's not comfortable or safe. I've seen people defend 4.5 like it's some kind of achievement. Meanwhile half the users over 50 or with bad eyesight are squinting at your site. If you're building anything for the public, you should be aiming for AAA. Not because it's required. Because people deserve to read without pain. That "sleek" gray on gray trend you mentioned is a joke. Designers worship aesthetics over function. They pick colors that look good on their fancy monitors and forget real people use phones in sunlight. If you caught it before launch, great. But don't let 4.5 become your goal. That's just lazy. Aim higher.