Skip to main content

Fixing Safari’s HTML-only Dark Mode bug

First posted in Accessibility, CSS and HTML; updated 4th November 2021

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 <meta name="color-scheme" content="dark light" /> 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>
@supports (color-scheme: dark light) {
@media screen and (prefers-color-scheme: dark) {
:where(a:link) {color: #9e9eff;}
:where(a:visited) {color: #d0adf0;}
}
}
</style>

Aside from increasing the contrast of links and visited links in Dark Mode, using the same colour values as Chrome, this:

  • wraps it all in a @supports at-rule so that the contained styles don’t get used for browsers like Firefox that support prefers-color-scheme but not HTML-only dark mode; #9e9eff and #d0adf0 have low contrast ratios against a white background (2.38 to 1 and 1.92 to 1, respectively)
  • uses the :where pseudo-class which is nice to use for ‘default’ styles since it always has 0 specificity, so doesn’t need any special overrides in the CSS (for example, chaining the pseudo-class in the selector like :link:link {})

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

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. Windows high contrast mode and focus outlines or: My focus indicators were inaccessible

    In order to make my website’s keyboard focus outlines pretty in Safari, I inadvertently broke things for people who use Windows High Contrast Mode.

  2. If you’re going to do a job, do it properly

    I often hear the phrase “forward fix” used when referring to accessibility. It sounds fancy, but what it really means is “We’ll come back to the accessibility bit later”.