Force Accurate Colors When Printing Web Pages

Modern browsers alter colors when printing web pages, which is entirely reasonable: few people wish to sacrifice an entire toner cartridge to a web page’s black background. But this behavior can be problematic: browser print routines will also remove background images, gradients, shadows and other effects, which can be important in the presentation of certain pages, such as portfolios.

Firefox has the Print Background Colors option in its Print dialog, which remains under the exclusive control of the user. Chrome and Safari will follow a particular CSS property to force accurate colors on elements when printing:

* {
	-webkit-print-color-adjust: exact;
}

While you can apply -webkit-print-color-adjust to any selector at all, the property will not work on the <body> background (again, saving that toner cartridge). However, it will work on child elements.

I would recommend erring on the side of caution when using the -webkit-print-color-adjust property: a reasonable assumption is to only use it for portfolio pages sent to a color printer, or other exceptions. This behavior can be specified with an embedded @media query on appropriate pages:

@media print and (color) {
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
		/* presentation rules for the page on color printers */
}

Another media query within the central linked style sheet (styles.css) should cover all other print options:

/* main styles.css presentational rules */
	@media print and (monochrome) {
	/* presentation rules for black-and-white printers, not concerned with color accuracy */
	}

The embedded @media query will also work with the Print To PDF option for those without printers, generating an accurate digital copy of the portfolio page. (I’d suggest providing a PDF version of the portfolio as a download option also: you can use the same print routine to generate it, or a tool like Prince).

There are two possible improvements to this approach:

It would be helpful to warn those with color printers that printing a portfolio page may consume more ink;
For the highest print quality, we should deliver high-DPI Retina images to the printer.

Both of these possibilities will be addressed in future articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.