# Background Colors Missing When You Print HTML or Save It as PDF — the Fix

Canonical: https://commareports.com/fix/html-print-backgrounds-missing
Published: 2026-10-02

> Your HTML report prints with white table headers, missing status colors and invisible dark-mode text. Why browsers drop backgrounds when printing, the one CSS property that keeps them, and the other print-only breakages to check.

# 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:

```css
.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:

```css
@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:

```css
@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](/fix/html-table-split-across-pdf-pages).

## Test it without editing the report

The free [HTML to PDF tool](/tools/html-to-pdf) 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](https://commareports.com/new) 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](/comment-on-html) 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 →](https://commareports.com/)**

### Related

- [HTML to PDF converter](/tools/html-to-pdf) — page size, margins and background colors in one step
- [Tables cut across PDF pages](/fix/html-table-split-across-pdf-pages)
- [The HTML file is too big to email](/fix/html-file-too-big-to-email)
- [Email an HTML report](/email-html-report)
- [Stop screenshotting reports](/stop-screenshotting-reports)