While I’m talking about the SVGs on The Session, I thought I’d share something else related to the rendering of the sheet music.

Like I said, I use the brilliant abcjs JavaScript library. It converts ABC notation into sheet music on the fly, which still blows my mind.

If you view source on the rendered SVG, you’ll see that the path and rect elements have been hard-coded with a colour value of #000000. That makes sense. You’d want to display sheet music on a light background, probably white. So it seems like a safe assumption.

Ah, but when it comes to front-end development, assumptions are like little hidden bombs just waiting to go off!

I got an email the other day:

Hi Jeremy,

I have vision problems, so I need to use high-contrast mode (using Windows 11). In high-contrast mode, the sheet-music view is just black!

Doh! All my CSS adapts just fine to high-contrast mode, but those hardcoded hex values in the SVG aren’t going to be affected by high-contrtast mode.

Stepping back, the underlying problem was that I didn’t have a full separation of concerns. Most of my styling information was in my CSS, but not all. Those hex values in the SVG should really be encoded in my style sheet.

I couldn’t remove the hardcoded hex values—not without messing around with JavaScript beyond my comprehension—so I made the fix in CSS:

[fill="#000000"] {
  fill: currentColor;
[stroke="#000000"] {
  stroke: currentColor;

That seemed to do the trick. I wrote back to the person who had emailed me, and they were pleased as punch:

Well done, Thanks!  The staff, dots, etc. all appear as white on a black background.  When I click “Print”, it looks like it still comes out black on a white background, as expected.

I’m very grateful that they brought the issue to my attention. If they hadn’t, that assumption would still be lying in wait, preparing to ambush someone else.

Have you published a response to this? :



# Liked by Erik Vorhes on Wednesday, April 26th, 2023 at 11:18am

# Liked by Trey Piepmeier on Wednesday, April 26th, 2023 at 11:54am

# Liked by Owen Gregory on Wednesday, April 26th, 2023 at 12:25pm

# Liked by Dave Rupert on Wednesday, April 26th, 2023 at 1:29pm

# Liked by Alan Dalton on Saturday, April 29th, 2023 at 2:11am

Previously on this day

1 year ago I wrote Speaking at CSS Day 2022

I’ve prepared some links to go with the talk.

8 years ago I wrote 100 words 035

Day thirty five.

8 years ago I wrote Extending


11 years ago I wrote Fanfare for the common breakpoint

“Common” breakpoints are the new fold.

12 years ago I wrote Voice of the bot-hive

I for one welcome our new voice-activated algorithmic overlords.

15 years ago I wrote Open Data and Accessibility

I delivered the keynote presentation at the Accessibility 2.0 conference.