Print color adjust

Learn print color with print-color-adjust.

What is print-color-adjust?

By default, browsers skip background colors and images when printing to save ink. The print-color-adjust property changes that. Two values: economy (default, skips) and exact (forces).

For example, .report-header { print-color-adjust: exact; } prints the header background. Older browsers may also need the -webkit-print-color-adjust prefix.

The economy and exact values

economy is the browser's default: it skips backgrounds and images. exact forces them to print. Which one you pick depends on the report's purpose.

For a corporate report where the header band's color matters, use exact. If saving ink is the priority, stick with economy. Put the declaration on the element itself; it also inherits.

Exercise Force the header background to print

Write a print-color-adjust: exact declaration for the .report-header selector. The same block must also declare background: navy and color: white. Include all three declarations.

Show example solution

/* force header background in print */
.report-header {
  background: navy;
  color: white;
  print-color-adjust: exact;
}

Test yourself

Which property forces the background color in print?
```
.report-header { print-color-adjust: exact; }
```
- color-print
- background-print
- print-color-adjust: exact
- color-adjust: yes
Show answer

print-color-adjust: exact — Correct. print-color-adjust: exact forces the background color onto paper.

Force the header background to print

.report-header {
  background: navy;
  color: white;
  ____;
}

Show answer

.report-header {
  background: navy;
  color: white;
  print-color-adjust: exact;
}

What does print-color-adjust: economy do?
- Skips backgrounds and images, saving ink
- Converts colors to black and white
- Prints all colors, using more ink
- Only changes the font
Show answer

Skips backgrounds and images, saving ink — Correct. economy skips backgrounds to save ink.
Match each value to its effect

print-color-adjust: exact

Forces colors to print
print-color-adjust: economy

Skips backgrounds
-webkit-print-color-adjust

Old browser prefix

Next lesson: Page number

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies