Dark mode best practices? In light of iOS 13...

[kmj2318]

For years now the recommendation for a dark website is to never use black, instead use some kind of dark grey. Story goes is that it’s more pleasing to read. We have seen the dark mode of macOS take this direction.

Now iOS 13 comes out and it’s using pure black. When I go to my website, it looks washed out in comparison because its using dark grey.

I have a theory that dark grey is easier to see in more lighting conditions than pure black, and that’s why it was recommended. But now, we have system wide dark mode that can either be chosen by the user. So why use grey any more? Isn’t it just a milk toast version of a true dark mode that was meant for a time before system wide dark mode?

First question: has iOS 13 made you question the best practices of dark websites?

Now I’m a little confused about what to do. My site looks at home on macOS, but not on iOS. If I make it pure black, the reverse is true. I can try to target iOS specifically but don’t want to that just yet.

Have you struggled with just how dark to make your dark theme because of macOS and iOS implementing it differently?

 

[Akrapovic]

You should not use absolute black on a site due to OLED black smearing.

Watch this video on a regular LCD screen and then on an OLED screen, you'll see the difference:

https://twitter.com/marcedwards/status/1053519077958803456?lang=en

This is actually observable on iOS12 in the Watch app on the iPhone X and above. There are some absolute black areas which you can recreate this effect with.

Is iOS13 using absolute black? If so, you're going to see this effect quite a lot.

 

[Nermal]

Is there any "official" guidance around which colours to use for hyperlinks on a dark site? I've had a quick nosy at the HIG but couldn't find anything in it.

If I make a really simple page with no CSS, then by default it has a white background, blue hyperlinks, and purple visited hyperlinks. They're all fairly functional. If I add ":root { color-scheme: light dark; }" and view the page in Dark Mode, then the background is now black... and the hyperlinks are still blue and purple, and are therefore fairly hard to read.

I would've thought that iOS' default stylesheet would have sensible defaults here, but apparently not! Any advice on which colours are preferred? I was thinking maybe some yellow, but I'm not sure...

 

[jonblatho]

I would've thought that iOS' default stylesheet would have sensible defaults here, but apparently not! Any advice on which colours are preferred? I was thinking maybe some yellow, but I'm not sure...

In general I’d advise against significantly changing colors (i.e., blue to yellow) between light and dark mode. A better approach in this case would be to still use blue and purple, but manually set lighter shades of each in the dark style to restore legibility while also avoiding confusion. The only reason I’d use yellow here is if high contrast is an absolute requirement for most/all users.

As for official guidance, in an era where so few sites use the default hyperlink colors, I doubt you’ll find any.