Printing background color of elements

Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spend tons of ink printing the background of a web page. But in some cases you want to print the background color of elements, e.g. bars of a chart. For those elements you need to set the following CSS styles:

-webkit-print-color-adjust: exact; /* Chrome and Safari */
color-adjust: exact; /* Firefox */

Another case is printing of white text. When removing background colors, chances are white text now stands on white. In order to keep legibility, browsers turn white text into gray (Chrome) or black (Firefox). However, white text on a maybe dark image should not be changed. The above properties help with that one as well.

Tip

If you're using autoprefixer Show archive.org snapshot , you don't need to add the prefixed variant yourself.