print-color-adjust
The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.
Overview
The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 136 | 136 | 97 | 15.4 | 136 | 15.4 | |
economy | 136 | 136 | 97 | 6 | 136 | 6 |
exact | 136 | 136 | 97 | 6 | 136 | 6 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (17)
Implementation note
- Chrome does not print backgrounds of the `<body>` element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.
- Before version 26, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See bug 40219905.
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Implementation note
- Edge does not print backgrounds of the `<body>` element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.
- Before version 79, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See bug 40219905.
Notes 1 item(s)
Implementation note
- Previously available under a different name: color-adjust (48)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (6)
Implementation note
- Safari does not print backgrounds of the `<body>` element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Implementation note
- Chrome Android does not print backgrounds of the `<body>` element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.
- Before version 26, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See bug 40219905.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (6)
Implementation note
- Safari on iOS does not print backgrounds of the `<body>` element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.
Syntax
CSS
/* Print elements with meaningful background colors exactly */
.status-badge {
print-color-adjust: exact;
-webkit-print-color-adjust: exact; /* For older versions of Safari */
}
/* Preserve table background color in print */
table th {
background-color: #f1f5f9;
print-color-adjust: exact;
}
/* Preserve chart bar colors in print */
.chart-bar {
print-color-adjust: exact;
}Live demo
Use cases
Adaptive styling
Use print-color-adjust to tailor layout or presentation to device features and user settings.
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.
Related links
Powered by web-features