Loading…
18
Watched a gray on gray header go from invisible to readable in 15 minutes with one hex change
So I was building a sign up page for a friend's dog walking business in Portland and the header text was this light gray on a slightly lighter gray card. I thought it looked clean in Figma on my monitor but when I pulled it up on my old phone at the park the text just vanished. Like I was squinting hard and still couldn't make out the words. I ran it through a contrast checker and got a ratio of 1.9 to 1 which is way below the 4.5 you need for normal text. I bumped the text from #B0B0B0 down to #4A4A4A and the ratio jumped to 7.8 to 1. Took me maybe 15 minutes total but the difference was honestly wild. Same layout, same font, just a darker gray. My friend looked at it and said oh wow I can actually read it now. Does anyone here have a go to dark gray they use for secondary text that still looks soft but passes?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.