Calamnet Guides

print-color-adjust

Browsers do not always print a webpage exactly as it appears on screen. They may remove background colors, suppress background images, change text colors, or simplify decorative effects to conserve ink and improve readability on paper.

The CSS print-color-adjust property lets a page indicate whether the browser should make those automatic adjustments or attempt to preserve an element's original appearance. It is useful—but it is not a command that overrides the user, browser, printer, or operating system.

The short answer

print-color-adjust accepts two primary values:

  • economy gives the browser permission to modify colors and backgrounds when it believes doing so will improve printing or conserve ink. This is the default.
  • exact indicates that altering the element's appearance could reduce usability or meaning, and requests that the browser avoid such adjustments when possible, because those visual choices are important. 
.status-badge {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

The easiest way to think about the difference is:

  • economy: "Adjust this if you think it will print better."
  • exact: "Please preserve this styling because it matters."

Why browsers change colors when printing

A webpage and a printed page operate under very different conditions. A screen produces light, while paper reflects it. A dark interface that looks excellent on a monitor may require a large amount of ink and produce text that is difficult to read when printed.

Browsers may therefore make decisions such as:

  • Removing a dark page background;
  • Changing white text to black;
  • Suppressing decorative background images;
  • Reducing large areas of saturated color;
  • Adjusting colors to improve contrast on white paper; or
  • Simplifying effects that do not translate well to print.

With the default economy behavior, the browser has permission to make these changes. The exact adjustments are implementation decisions and may differ between browsers, operating systems, printers, and user settings.

What print-color-adjust: economy means

economy is the property's initial value. It tells the browser that preserving the element's exact appearance is not essential. 

.article {
  print-color-adjust: economy;
}

You normally do not need to declare this value because it is already the default. It can still be useful when a parent element uses exact and you want a particular child to return to the browser's normal print behavior. 

.report {
  print-color-adjust: exact;
}

.report__decorative-footer {
  print-color-adjust: economy;
}

This works because print-color-adjust is inherited. A value applied to a container can affect its descendants unless they receive their own value.

What print-color-adjust: exact means

exact tells the browser that an element's colors and visual styling have been chosen deliberately and that changing them could make the result less understandable. 

.chart,
.status-key,
.highlighted-table-row {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

This does not guarantee physically exact colors. A printer may have a limited color range, use grayscale output, run low on ink, or apply its own color management. Instead, the declaration asks the browser not to perform its usual economy-oriented substitutions before sending the document to the printing system.

It is a request, not an absolute command

User print preferences take priority over author CSS. If someone disables background graphics, selects black-and-white output, or uses a browser that handles the property differently, exact may not preserve every visual detail.

A document should therefore remain understandable even when its colors are removed or changed.

When exact is helpful

The property is most appropriate when removing a color or background would reduce meaning, organization, or usability.

Status indicators

A report may use colored badges to distinguish successful, pending, warning, and failed states. Preserving those fills can make a printed report easier to scan. 

@media print {
  .status-badge {
    border: 1px solid currentColor;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

The border and visible text remain important because color alone should not communicate the status.

Charts and data visualizations

Charts frequently rely on a coordinated palette. Applying exact to the chart and its legend can help preserve the relationship between a series and its label.

Patterns, direct labels, different line styles, and distinct marker shapes should still be used when possible. A color-preservation request is not a substitute for an accessible chart.

Alternating table rows

Light alternating backgrounds can make wide tables easier to follow. If the browser removes those backgrounds, a reader may have more difficulty tracking a row across multiple columns. 

@media print {
  .data-table tbody tr:nth-child(even) {
    background-color: #eef2f7;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Tickets, labels, and structured forms

A ticket, shipping label, certificate, or printable form may use background blocks to separate important regions. Preserving those blocks can protect the intended information hierarchy.

When not to use exact

Avoid applying exact automatically to the entire website merely to make the printed page resemble the screen. 

/* Usually too aggressive */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

A global declaration can cause large photographs, dark backgrounds, gradients, shadows, navigation treatments, and decorative artwork to consume ink without improving the printed document.

It can also interfere with the browser's attempt to convert a dark interface into a readable light printout. Apply exact only to elements whose backgrounds or colors serve a clear purpose.

A practical print stylesheet

A good print stylesheet usually simplifies the overall page while preserving selected meaningful elements. 

@media print {
  body {
    color: #111827;
    background: #ffffff;
    font-size: 11pt;
    line-height: 1.5;
  }

  nav,
  .search,
  .share-buttons,
  .decorative-banner,
  .screen-only {
    display: none !important;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  .status-badge,
  .chart,
  .chart-legend,
  .important-highlight {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .status-badge {
    border: 1px solid currentColor;
  }

  table {
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #64748b;
    padding: 0.4rem;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  table,
  figure,
  pre {
    break-inside: avoid;
  }
}

Including -webkit-print-color-adjust remains a reasonable compatibility measure for older WebKit- and Chromium-based browsers. The unprefixed print-color-adjust property is the standardized declaration and should come last. The prefixed property remains widely used in practice even though the standardized property is now broadly supported.

Accessibility considerations

Preserving color is not the same as preserving meaning. Printed content should remain understandable when:

  • The printer is set to grayscale;
  • Background graphics are disabled;
  • The printer produces colors differently from the screen;
  • Someone uses a high-contrast print configuration;
  • The page is photocopied; or
  • The user overrides the author's print choices.

Important distinctions should use more than color. Combine color with text, icons, borders, patterns, line styles, or other visible differences.

For example, a red background alone is not a durable way to identify an error. A visible "Error" label and an icon preserve the message even if the background disappears.

How to test print-color-adjust

  1. Open the browser's print-preview window.
  2. Test with background graphics enabled and disabled.
  3. Preview both color and grayscale output when those options are available.
  4. Save the result as a PDF and inspect every page.
  5. Confirm that text remains readable when backgrounds disappear.
  6. Check that tables, charts, badges, and legends retain their relationships.
  7. Test more than one browser if printing is an important product feature.
  8. Print a physical sample when accurate output is business-critical.

Print preview is necessary, but a physical printer can reveal differences that a PDF does not show, including weak contrast, clipped margins, color shifts, and unexpectedly dense ink coverage.

Common misunderstandings

Does exact force background printing?

No. It asks the browser to preserve the styling, but user preferences and browser behavior still take priority.

Does it make printed colors physically accurate?

No. Physical color accuracy depends on the printer, paper, ink, color profiles, driver settings, and output mode.

Does it only affect background colors?

No. The browser may adjust colors, images, and other visual styling when optimizing output. Background suppression is simply the most familiar example.

Is it the same as forced-color-adjust?

No. print-color-adjust concerns automatic output adjustments, particularly print-oriented changes. forced-color-adjust controls whether forced-colors mode can replace an element's colors. They address different rendering situations.

Allow the browser to handle ordinary page content economically, then preserve only the components whose colors or backgrounds contribute meaningful structure. 

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

Use the class on charts, status keys, highlighted table regions, or other carefully selected elements. Do not use it as a substitute for a proper print stylesheet.

Final takeaway

print-color-adjust controls how much freedom the browser has to alter an element's appearance for printed or other output. economy allows optimization; exact asks for the original styling to be preserved.

Use exact selectively when color and backgrounds improve understanding—not simply because they are part of the screen design. Always assume that users, browsers, and printers may still override the result, and make sure the document remains readable without color.

Sources and further reading