Loading…
17
Spent 2 hours on a dark theme and the contrast ratio was way off
I was building a dark mode for a portfolio site last night and set the background to #1a1a1a with light gray text. Turned out the contrast ratio was only 3.5 to 1, not even close to WCAG AA standards. Anybody else run into this when picking dark palette combos for the first time?
2 comments
Log in to join the discussion
Log In2 Comments
diana_bell742mo ago
Classic rookie mistake" haha yeah that's exactly what I called it when I checked mine too. The trick I learned is to bump up the text color to like #e0e0e0 or even #ececec instead of standard light gray, it makes a huge difference. Also you gotta check your background isn't too dark either, #1a1a1a is actually decent but going to #222222 gives you more wiggle room with the text. I use a free browser tool called Contrast Checker by A11y, you can plug in hex codes and it tells you the ratio instantly. Saves so much trial and error, trust me.
3