Skip to main content

Fixing Safari’s HTML-only Dark Mode bug

Posted in Accessibility, CSS and HTML

Aside from the lack of Firefox support, there’s a bug in Safari that makes it difficult to see links in browser’s HTML-only dark mode.

The problem is that the blue colour used for links is the same as that used in Light Mode (#0000ee), which has a 1.99 to 1 contrast ratio against the dark page background #121212. This means it doesn’t meet the AA Web Content Accessibility Guidelines (WCAG) Contrast (Minimum) success criterion (SC).

Chromium browsers (Chrome, Edge, Opera, Brave, etc.) use #9e9eff for links, which is a 7.84 to 1 contrast ratio, satisfying not only Contrast (Minimum), but the level AAA Contrast (Enhanced) SC.

It’s a similar story with visited links, where Safari uses a failing #551a8b (a 1.7 to 1 contrast ratio) and Chromium browsers use an excellent AAA #d0adf0 (a 9.73 to 1 contrast ratio).

Fixing the bug

I want to use the name="color=scheme" meta element in my HTML, so the way I’ve implemented it on my website is to add a <style> block to the bottom of each page, before the closing </html> tag (so that it doesn’t block any rendering):

<style>
@media screen and (prefers-color-scheme: dark) {
a {
color: #9e9eff;
}
a:visited {
color: #d0adf0;
}
}
</style>

These styles are then overridden in my CSS, so that they look nice and on-brand:

@media screen and (prefers-color-scheme: dark) {
a:link,
a:visited:visited
{
color: #00a0f0;
}
}

Note to self, I really should get round to adding visited link styling at some point.

The :link pseudo class overrides the naked a on-page styling, and the chained :visited pseudo class overrides the unchained :visited pseudo class.

I’m not very happy with that code though. It’s ugly and unnecessary, so I hope the WebKit team fix that bug soon so that I can tidy things up. But in the meantime, Safari users with low vision will be able to discern links in Dark Mode when the CSS fails to load.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. How I approach CSS: my ABC system

    CSS is easy to write but can become messy and bloated over time. A solid methodology can make maintenance much more comfortable; here’s how I do it.

  2. Critical CSS: what it is, why it’s useful, and how it works

    With Critical CSS, we can give our visitors the most important styling as early as possible and the rest when it’s ready. Here’s why and how to do it.