Print Color Adjust

What is Print Color Adjust?

The print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of an element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device, as documented by MDN Web Docs.

This property is part of the CSS Color Adjustment Module Level 1 specification, which introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, performance considerations, and accessibility needs.

Why Print Color Adjust Matters

When users print web pages, browsers face a fundamental conflict between preserving visual design and serving practical user needs. Printing a page exactly as it appears on screen can consume significant ink, produce unreadable results on certain printers, and waste paper resources. At the same time, stripping away all visual styling can make printed materials harder to read or less useful for their intended purpose.

Print color adjust provides a middle ground by allowing developers to communicate their intent. Elements marked with print-color-adjust: exact signal that the colors, images, and styles have been carefully crafted and should be preserved. Elements using the default economy value signal that browser optimizations are acceptable.

This property is particularly relevant for web performance because it affects how pages render in print preview modes, PDF generation, and any scenario where the browser transforms screen content for physical output. Understanding and using this property appropriately improves both user experience and resource efficiency. When pages are optimized for print, users save money on ink and paper, organizations reduce their environmental impact, and the printed materials are often more readable and professional.

For businesses that generate printable reports, invoices, or marketing materials, proper print color adjustment ensures that the final output maintains brand integrity while still allowing for sensible resource conservation. The key is making intentional decisions about which visual elements truly need preservation and allowing the browser to optimize everything else.

Syntax and Values

The print-color-adjust property accepts two primary values plus the standard CSS-wide keywords.

Economy (Default)

The economy value tells the user agent it is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device. For example, when printing, a browser might opt to leave out all background images and adjust text colors to ensure contrast is optimized for reading on white paper, as explained in the MDN print-color-adjust documentation.

This is the initial value, meaning elements inherit browser-optimized print behavior unless explicitly overridden. Economy is appropriate for most content where exact visual reproduction is not critical and ink conservation is valued. Standard blog posts, news articles, and informational pages typically work well with this default.

Exact

The exact value indicates that the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful way, such that being altered by the browser might actually make things worse rather than better. The appearance should not be changed except by the user's request.

Using exact preserves background colors and gradient overlays that would otherwise be stripped or adjusted. This value should be used sparingly and intentionally, as it overrides the browser's ink-saving optimizations.

Global Values

The property also accepts standard CSS-wide keywords including inherit, initial, revert, revert-layer, and unset. These follow normal CSS cascade rules and can be useful for resetting or inheriting print color adjustment behavior across your stylesheet.

Formal Definition

Understanding the formal specification helps clarify exactly how print-color-adjust behaves.

The property applies to all elements, meaning it can be set at any level of specificity in the CSS cascade. Being inherited means child elements automatically receive the same print-color-adjust value as their parent unless explicitly overridden, as documented by MDN Web Docs.

The discrete animation type indicates that the property cannot be smoothly transitioned between values. If an animation attempts to change print-color-adjust, it will simply switch instantly rather than fade between states.

W3C Specification Context

According to the CSS Color Adjustment Module Level 1, the print-color-adjust property controls whether the browser is allowed to automatically adjust colors to the user's assumed performance preferences, such as suppressing background colors when printing to save ink. This specification groups print-color-adjust with other color control features including color-scheme for preferred color schemes and forced-color-adjust for forced colors mode accessibility features.

The specification intentionally gives user agents flexibility in how they implement optimizations, recognizing that different output devices have different capabilities and user needs. This means browser implementations may vary in exactly what optimizations they apply, but all follow the core principle of allowing developers to signal their intent through the economy and exact values.

Common Use Cases

When to Use Economy

The economy value is appropriate for most content because it allows browsers to make sensible decisions about print output. Consider using economy for:

• Standard article text and blog posts
• Informational pages without special styling
• Charts and graphs where data clarity matters more than color
• Navigation elements and footer content
• Any content where ink conservation and readability take priority

The browser will typically remove heavy background colors, adjust text contrast, and simplify complex gradients to produce clean, readable output that uses minimal ink.

When to Use Exact

Use the exact value when your design depends on specific colors for functionality, branding, or user experience. Common scenarios include:

• Data visualization where color encoding conveys information and removing colors would make the data meaningless
• Branded materials where color accuracy matters for maintaining brand identity
• Accessibility aids that use color as a distinguishing feature
• Tables with alternating row colors for readability
• Color-coded charts and infographics that communicate information through color

A practical example is a table with alternating row background colors for readability. If the browser strips these backgrounds, the table becomes harder to read on paper. Setting print-color-adjust: exact preserves this helpful visual structure:

/* Preserve alternating row colors in tables */
.data-table tr:nth-child(even) {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
}

Browser Behavior and Optimization

Common Optimizations

Browsers apply various optimizations when print-color-adjust is set to economy:

• Background images are typically removed or simplified to solid colors, especially dark or dense backgrounds that consume significant ink
• Text colors may be adjusted to ensure sufficient contrast against white paper
• Complex gradients are flattened to solid colors
• Semi-transparent overlays are made opaque or removed entirely

These optimizations are not standardized, meaning different browsers may make different decisions. The specification gives user agents flexibility to determine what adjustments are "necessary and prudent" for their target output devices.

User Override Priority

Any options the user agent offers the user to control color and images take priority over print-color-adjust. If a browser provides a setting to "print background colors" or "save ink," user preferences override developer intent. Additionally, there is no guarantee that print-color-adjust will do anything, as each user agent can decide how to handle the property, as noted in the MDN documentation.

Testing Tips

Testing print color adjustment requires using browser print preview or PDF generation features. Modern browsers provide print preview interfaces that show how pages will appear when printed, including any color adjustments the browser applies. Keep these testing tips in mind:

• Test across multiple browsers since behavior can vary significantly
• Use actual printing, not just print preview, as some optimizations only apply during real printing
• Check print results on different printer types (inkjet vs laser) as results may differ
• Verify that color-coded information remains interpretable in print
• Consider testing with different browser print settings to see how user preferences affect output

Creating a print style checklist that includes verification of color-sensitive elements, text readability, and page breaks ensures consistent results across different printing scenarios.

Browser Compatibility

Print-color-adjust has broad support across modern browsers as part of the Baseline status.

Vendor Prefixes

For maximum compatibility, include both standard and prefixed versions:

.preserve-colors {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
}

The prefix is particularly important for Safari and any WebKit-based browsers. Without the prefix, these browsers may ignore the property.

Fallback Behavior

If print-color-adjust is not supported, browsers will use their default print optimization behavior (economy-like). Pages remain functional in older browsers, though they may not preserve colors as intended.

Feature Detection

To detect support and apply print-color-adjust only when supported, use CSS feature queries:

@supports (print-color-adjust: exact) {
 .preserve-print {
 print-color-adjust: exact;
 -webkit-print-color-adjust: exact;
 }
}

@supports not (print-color-adjust: exact) {
 .preserve-print {
 /* Fallback behavior - browsers will use economy */
 }
}

This approach ensures that modern browsers get the exact behavior while older browsers gracefully fall back to default optimizations.

Performance and Resource Considerations

Ink and Paper Conservation

The primary benefit of allowing browser optimization through print-color-adjust: economy is resource conservation. Printing web pages as they appear on screen can consume dramatically more ink than optimized output:

• Dark backgrounds consume significant ink and may bleed on lower-quality paper
• Full-bleed images increase ink usage substantially
• Complex gradients require more color transitions and ink coverage

For organizations that print frequently, such as offices, schools, and libraries, the cumulative savings from optimized print output can be substantial. Encouraging developers to use economy by default and exact selectively supports broader sustainability goals while reducing operational costs.

Print Performance

Print preview and PDF generation performance can be affected by print-color-adjust settings. Pages with many elements using exact may take longer to render because the browser must preserve complex visual information rather than applying simplified optimizations. For long documents or pages with many images, consider which elements truly need exact color preservation and use economy for everything else.

Accessibility Considerations

Print color adjustment intersects with accessibility in important ways. The ability to preserve colors helps maintain color-coded information that may be essential for some users. At the same time, browser optimizations that improve contrast can benefit users with visual impairments.

Specific accessibility examples include:

• Status indicators using green/red color coding to show pass/fail states should preserve colors so the meaning is maintained in print
• Heat maps and data visualizations that rely on color gradients to show intensity need exact to communicate the full data story
• Accessibility tags and labels that use color-coded borders or backgrounds to distinguish important information should use exact
• Forms with error states that use color highlighting need consistent color treatment to be effective when printed

When designing print styles, consider both the screen and print experiences. Elements that use color semantically should use print-color-adjust: exact to preserve their meaning in print. Decorative uses of color can use economy to support resource conservation.

Combining print-color-adjust with other print-friendly CSS properties like page-break rules and proper text formatting creates comprehensive print styles that serve all users effectively. For related CSS properties, explore our guides on responsive design and line height adjustments.

Sources

1. MDN Web Docs - print-color-adjust - Comprehensive official documentation covering syntax, values, formal definitions, and examples
2. W3C CSS Color Adjustment Module Level 1 - Official W3C specification providing normative definitions
3. Web Reference - print-color-adjust - Property reference and usage notes