Loading…
9
I shipped a checkout button that looked disabled for 6 weeks because of one gray hex code
Two months ago I picked #CCCCCC for our checkout button text because it looked clean in Figma on my bright monitor. Turns out on cheap phones in daylight it looked straight up grayed out, and we lost about 140 orders over 6 weeks because people thought the button was off. I only found out when my mom tried to buy a candle from our shop and called me asking why the pay button was broken. Now I check every button against a real phone screen outside before it ships. What's your go to way to test color contrast without fancy tools?
1 comments
Log in to join the discussion
Log In1 Comment
mila_jones399d ago
There's a thing called the APCA contrast method that's way better than the old WCAG checker for this exact problem. I read a NN/g article about how light gray text on white passes the math but still looks dead to real eyes, especially in sunlight. The fix is bumping the text to at least #767676 or darker so it never reads as grayed out. I also screenshot the button at 50% brightness on my oldest phone and glance at it outdoors before calling it done lol.
1