My dark mode site looked great on my monitor but bombed on 3 phones last weekend

Spent 2 weeks building a new portfolio site in dark mode with these cool grey tones I picked. Looked awesome on my 27 inch screen at home. Then I pulled it up on my buddy's iPhone at a coffee shop in Oakland and I couldn't read half the links. Pulled out my own Pixel and the text shadows basically disappeared. Three different phones, three different disasters. Turns out my contrast ratio was like 2.5:1 on some key buttons. WCAG rules are a pain but I guess they exist for a reason. Anyone else have a moment where your design fell apart on a real device?

3 comments

3 Comments

gavin_mason3111d ago

My Pixel 6 Pro made my site look like a muddy mess. I used some dark charcoal as background with slightly lighter grey text. On my desktop it looked slick. On that phone screen in direct sun I could barely see the navigation buttons. The contrast ratio I checked later was like 3:1. WCAG says 4.5:1 for normal text. I just run all my stuff through a contrast checker now before I even push it live.

blair_butler4711d ago

@Gavin_Mason31 come on man, is it really that big of a deal?

adams8211d ago

Gavin's right about that 4.5:1 rule being a lifesaver. It reminds me of how so many things we trust in normal life just break down when conditions change - like reading a menu in a dimly lit restaurant versus bright sunlight. We all think our designs are solid until real world variables show up and prove us wrong.