One issue with making websites printable is that printing, by default, removes background colors and images. So, for the chess diagrams I have on my webpage, I use background colors to have the chessboard be a checkerboard instead of a white background (the chess pieces are a color webfont)—but since web printing removes backgrounds, the chessboards have white backgrounds unless the person printing the webpage chooses “print backgrounds”.

The only way to work around this is to have two sets of chess pieces in the font, one with a white background for pieces on light squares, and one with a colored background for pieces on dark squares.

Printing web pages is rare enough I just assume someone doing that will also click on “print backgrounds”.

(The reason to not use images for the chessboard diagrams is because they use more bandwidth and can’t have usable “dark mode” colors)

Sounds like SVGs would work well for this.

But it's only by default. So the super easy workaround is to check the "Print backgrounds" box when printing.

You might be able to fix this with a few simple print CSS rules though.