Comma

Background colors missing when you print HTML

The report looks right in the browser. Then someone hits Print or Save as PDF and the result is a ghost of it: table headers lose their fill, the red and green status chips go white, zebra striping vanishes, and a dark-mode page comes out as pale text on blank paper.

Nothing is broken. The browser is saving ink.

Why it happens

Every major browser drops background-color and background-image when it prints, unless the reader ticks a box in the print dialog:

Browser Checkbox name Default
Chrome, Edge Background graphics Off
Firefox Print backgrounds Off
Safari Print backgrounds Off

Save as PDF is printing. It runs through the same dialog with the same default, so the PDF you attach to the email has the same holes.

Text color is kept. That asymmetry causes the worst case: a dark theme loses its dark background but keeps its light text.

The fix: print-color-adjust

Tell the browser which colors are content, not decoration:

.status,
th,
.badge,
.chart-legend {
  -webkit-print-color-adjust: exact; /* Chrome, Edge, Safari */
  print-color-adjust: exact; /* Firefox, and the standard name */
}

With exact, those backgrounds print whether or not the reader ticks the checkbox. If the whole report is color-coded, put it on * and stop thinking about it:

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

You can't tick the checkbox for the reader. This property is the only lever you have.

Dark-mode reports: pick one

Keep the dark look with the rule above. Fine on screen-PDFs, heavy on a real printer.

Or switch to light for print, which is what most readers want on paper:

@media print {
  :root {
    color-scheme: light;
  }
  body {
    background: #fff;
    color: #111;
  }
}

If the report uses CSS variables for its palette, override the variables inside @media print instead of every rule.

Four other things that break only on paper

  1. Box shadows and borders made of shadows. A card outlined with box-shadow loses its outline in print. Use a real border inside @media print.
  2. White text on an image or gradient. The background goes, the white text stays. Same fix as dark mode.
  3. Canvas charts. They print the bitmap drawn for the screen — soft at print resolution, and possibly the wrong width for the page. SVG charts scale cleanly; many canvas libraries redraw on beforeprint, and a fixed print width in @media print covers the rest.
  4. Hidden-by-default content. Collapsed <details>, inactive tabs and scroll containers print in their current state. Open what matters before printing, or add overflow: visible and display: block to them in print styles. Tables that split badly are their own problem — see tables cut across PDF pages.

Test it without editing the report

The free HTML to PDF tool renders pasted HTML in a sandbox and injects print-color-adjust: exact for you, along with page size, margins and keep-together rules. Paste, preview, save. The file never leaves your browser.

To check print styles in Chrome without printing: DevTools → ⋮ → More tools → Rendering → Emulate CSS media type → print.

Or skip the PDF

A PDF is a photograph of the report. It drops interactivity, it goes stale the moment the numbers change, and feedback comes back as "page 3, the red one?"

If the PDF is only how the report travels, publish it to Comma and send the link. Colors and charts render as built, the link keeps pointing at the latest revision, and readers comment on the exact cell they mean. Restrict it with a password, an invite list or your company's email domain when the numbers aren't public.

Keep the PDF for what PDFs are good at: archives, signatures, offline.

Try it

Publish a report →

Related