Hintergrundfarbe (background color) drucken mit color-adjust

Für alle Browser: Border statt background

Die wohl einfachste Möglichkeit, Farbe mit auszudrucken ist, statt background-color mit einem border zu arbeiten. Das funktioniert allerdings nur mit „leeren“ Elementen, also wenn man etwa ein rotes Quadrat anzeigen möchte um zu zeigen, dass ein Artikel nicht lieferbar ist.

// background-color wird nicht gedruckt
.box {
    width: 20px;
    height: 20px;
    background: red;
}

// border-color dagegen schon!
.box {
    width: 0;
    height: 0;
    border: 10px solid red;
}

Vorteil: Funktioniert in allen Browsern (sogar dem IE bzw. Edge) und man kann die Lösung ebenso für die Screen-Darstellung nutzen, muss also in der Print.css keine Ausnahme machen. Das Beispiel funktioniert allerdings nicht, wenn in dem Element auch noch Text vorhanden ist – also etwa wenn man eine Tabellen-Zelle farblich hinterlegen will.

background-color drucken mit color-adjust

Mit der CSS-Eigenschaft color-adjust gibt man an, ob eine Hintergrundfarbe gedruckt werden soll. Der default-Wert ist color-adjust: economy; und hiermit werden Hintergrundfarben beim Drucken ignoriert. Mit color-adjust: exact; wird die Farbe genauso ausgegeben wie definiert:

Für Webkit-Browser funktioniert das ganze mit -webkit-print-color-adjust. Mit den folgenden Zeilen weist man also Firefox, Chrome, Safari und Opera an, den Hintergrund zu drucken.

.verfuegbar {
    background-color: green;
    color-adjust:exact;
    -webkit-print-color-adjust:exact;
}

.nicht-verfuegbar {
    background-color: red;
    color-adjust:exact;
    -webkit-print-color-adjust:exact;
}

Aktuelle Infos zur Browserunterstützung findet ihr bei caniuse.com

Kein color-adjust im IE und Edge

Die Browser aus dem Hause Microsoft machen hier leider nicht mit. Falls jemand dazu eine Idee hat freue ich mich über einen Tipp in den Kommentaren.