print-color-adjust
ブラウザは印刷時にインクを節約するため背景色や背景画像を削除することがある。print-color-adjust: exact を指定すると、この最適化を無効にして画面表示通りの色で印刷できる。表やグラフなど、背景色が意味を持つ要素に使用する。
概要
ブラウザは印刷時にインクを節約するため背景色や背景画像を削除することがある。print-color-adjust: exact を指定すると、この最適化を無効にして画面表示通りの色で印刷できる。表やグラフなど、背景色が意味を持つ要素に使用する。
対応ブラウザ
デスクトップ
Chrome 136+
Edge 136+
Safari 15.4+
Firefox 97+
モバイル
Chrome Android 136+
Safari iOS 15.4+
Firefox Android 97+
基本構文
CSS
/* 背景色が意味を持つ要素を正確に印刷 */
.status-badge {
print-color-adjust: exact;
-webkit-print-color-adjust: exact; /* Safari旧版対応 */
}
/* 表の背景色を印刷で維持 */
table th {
background-color: #f1f5f9;
print-color-adjust: exact;
}
/* グラフの色を印刷で維持 */
.chart-bar {
print-color-adjust: exact;
}実務での使いどころ
-
表・グラフの印刷
データテーブルやグラフの背景色を印刷時にも維持して、情報の読み取りやすさを保つ。
-
ステータスバッジの印刷
色で状態を表すバッジやラベルを、印刷時にも画面通りの色で出力する。
注意点
- Chrome 136未満では -webkit-print-color-adjust を併記する必要がある。
- ユーザーがインク節約のために背景を印刷しない設定にしている場合もあるため、過度に使わない。
フォールバック戦略
CSS
.print-exact {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}アクセシビリティ
- 色だけに依存せず、テキストラベルやパターンも併用して情報を伝達する。印刷時にモノクロになる可能性も考慮する。