How it renders / print-color-adjust
How to force background colours to print
print-color-adjust: exact tells the renderer not to optimise colours away for printing, which is the per-element counterpart to the render's printBackground option.
What it is for
Browsers drop backgrounds when printing to save ink. That default is right for a web page and wrong for an invoice with a coloured totals block, and this is how you say so.
Support: Works in a browser-based render
Supported, with -webkit-print-color-adjust still needed for older engines. The render-level background flag is the blunter control and it is on by default here; this property is for the narrower case of forcing colour on one element within a document that is otherwise economical.
The syntax
Written the way it would appear in a document stylesheet, using print-color-adjust as intended.
/* Both, because the prefixed form is still what some engines read. */
.totals-block,
.status-badge,
thead {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}The mistake people make
Reaching for this when backgrounds are missing entirely. The render-level flag is on by default here, so if nothing is painting at all, the cause is the stylesheet rather than either control. This property is for the narrower case where you want one element to keep its colour in a document that is otherwise economical.
Frequently asked
Does print-color-adjust work when generating a PDF?
Works in a browser-based render. Supported, with -webkit-print-color-adjust still needed for older engines. The render-level background flag is the blunter control and it is on by default here; this property is for the narrower case of forcing colour on one element within a document that is otherwise economical.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
Does @media print apply when generating a PDF
@media print. Works everywhere.
How to stop a PDF rendering in dark mode
prefers-color-scheme. Works everywhere.
Why position: fixed behaves strangely in a PDF
position: fixed. Works in a browser-based render.
Why images look blurry in the PDF
image-rendering. Works everywhere.
How to put a background or watermark on every PDF page
background on body. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.