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. WWDC 2021 roundup

    Just like last year, I’ve written a list of the announcements that stood out at this year’s World Wide Developer Conference (WWDC).

  2. The trouble with back links

    You’d think that adding a back link to a web page would be straightforward. Well, it turn out that it’s not! Let’s have a look at three ways to do it.