Skip to main content

Scrollbar marker colours on macOS

Posted in Accessibility and CSS

The other day, a colleague of mine asked why I didn’t have scrollbars on my website (thanks for the heads-up, Sam!). I was confused: there were scrollbars, weren’t there?

I’ve been using Dark Mode since it landed in macOS Mojave back in 2018, where the scrollbars have been showing fine. Turns out I hadn’t noticed that in Light Mode they were barely visible, and, as the default scrollbars are an operating-system wide feature, this was across all browsers on macOS! Quite the accessibility faux pas!

The problem

You know that satisfying bounce when you scroll up or down and hit the top or bottom of the page? It happens in Safari and Chrome (and Chrome-alike browsers like Opera and Edge), so I added a colourful background behind the main page canvas, to match my brand. Something along these lines:

html {
background-color: blue;
}

.canvas {
background-color: white;
}

@media screen and (prefers-color-scheme: dark) {

.canvas {
background-color: black,
}
}

macOS chooses either a light or a dark scroll marker, but I had made the mistake of assuming the colour of the marker was based on the main background colour. Naïvely, I didn’t think it would make a difference which element the colour was added to.

Things looked fine in Dark Mode because the scroll markers were being chosen based on the blue I was using, which is considered ‘dark’: the markers were light, for the best contrast. This was fine against the dark grey background of the canvas, but in Light Mode, the markers remained light, producing exactly zero contrast against the white background!

It turns out that the scroll marker colour is chosen based on the background-color of the <html> (or <body>) element; any background colours set after that, like on my .canvas element, aren’t taken into account.

The solution

The solution was to use two background blues, just as I’d used different colours for the canvas: one for Light Mode and another for Dark Mode.

Two blocks of the colour blue, side by side; one very slightly lighter than the other

The lighter blue (#09adfc) is considered a ‘light’ colour, so a dark scroll marker is produced, contrasting nicely with the white canvas that overlays it.

I then nested the Dark Mode background-color in prefers-color-scheme: dark media queries so that the the light markers the browser uses were still visible against the dark grey background.

html {
background-color: lightBlue;
}

@media screen and (prefers-color-scheme: dark) {

html,
body
{
background-color: darkBlue;
}
}

.canvas {
background-color: white;
}

@media screen and (prefers-color-scheme: dark) {

.canvas {
background-color: black,
}
}

So the lesson is: if you’ve got a colour behind your page to add that wee bit of scrolling pizazz, make sure it’s in the same category (light or dark) as that of your main page canvas or you risk badly contrasting scroll markers!

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. Mac event 2021

    Apple had their final event of the year last night and it was especially exciting as I’m in the market for a new Mac. Here are my thoughts.

  2. Face ID on the Mac won’t happen

    With an October Mac event looming, I got to thinking about Face ID on the Mac; I don’t think it’ll be added now, and might not ever be.