Serious question, why did my gray footer text look fine to me but invisible to my friend in bright sun? | Color Contrast Checks - The Design Community Hub
Serious question, why did my gray footer text look fine to me but invisible to my friend in bright sun?
I spent 4 hours over two evenings last week fighting with a footer on a site for a buddy's bike repair business in Reno. The text was light gray, like #B0B0B0, on a slightly darker gray background, and on my monitor at home it looked totally fine, clean and subtle. Then my friend opened it on his phone outside while he was out riding and called me asking why the hours and address section was blank. I pulled it up on my phone in direct sunlight and sure enough, the text basically disappeared, and that is when I finally ran it through a contrast checker and saw it was sitting at about 1.8 to 1. I bumped the text to a much darker gray and kept the background the same, and now it reads at around 8 to 1. Funny part is the whole fix was maybe 90 seconds once I stopped trusting my own screen. Has anyone here run into a case where a color combo passed on desktop but died on a phone outdoors, and what did you do about it?
Did you ever try to read your own site on a phone while standing outside? I had the same thing happen with a pale gray menu on a white header, and it looked fine on my laptop but turned into a ghost on my phone in the sun. Now I check contrast first before I pick anything, so the sun never gets to decide what my text looks like.