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.

Accessibility in your inbox

I send an accessibility-centric 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. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.

  2. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!