Newly available 主要ブラウザで対応済みだが、Chrome 136以降が必要。印刷対応が必要な場合に使用する。

print-color-adjust

print-color-adjust は CSS のプロパティで、ユーザーエージェントが出力端末上で要素の外観を最適化するために、何らかの調整を行うことができるかを設定します。 既定では、ブラウザーは、出力端末の種類や能力を得た上で、必要かつ賢明であると判断した要素の外観に対する調整を行うことができます。

印刷カラー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
print-color-adjust
136
136
97
15.4
136
15.4
economy
136
136
97
6
136
6
exact
136
136
97
6
136
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (17)
実装メモ
  • Chrome は `<body>` 要素の背景を印刷しません。 このプロパティが `<body>` 要素に対して `exact` に設定されている場合、そのプロパティはその子孫にのみ適用されます。
  • バージョン 26 より前では、背景画像がクリップされ (たとえば、`background-image` スプライトを使用する場合) かつ `-webkit-print-color-adjust` が `exact` に設定されている場合、印刷時に背景が歪んで表示されます。 単色の背景とクリップされていない背景画像 (つまり、適用される要素よりも幅が狭くて短い背景) は正しく印刷されます。 バグ 40219905 を参照してください。
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
実装メモ
  • Edge は `<body>` 要素の背景を印刷しません。 このプロパティが `<body>` 要素に対して `exact` に設定されている場合、そのプロパティはその子孫にのみ適用されます。
  • バージョン 79 より前では、背景画像がクリップされ (たとえば、`background-image` スプライトを使用する場合) かつ `-webkit-print-color-adjust` が `exact` に設定されている場合、印刷時に背景が歪んで表示されます。 単色の背景とクリップされていない背景画像 (つまり、適用される要素よりも幅が狭くて短い背景) は正しく印刷されます。 バグ 40219905 を参照してください。
注釈 1件
対応条件
  • 以前は別名で対応していました: color-adjust (48)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
実装メモ
  • Safari は `<body>` 要素の背景を印刷しません。 このプロパティが `<body>` 要素に対して `exact` に設定されている場合、そのプロパティはその子孫にのみ適用されます。
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
  • Chrome Android は `<body>` 要素の背景を印刷しません。 このプロパティが `<body>` 要素に対して `exact` に設定されている場合、そのプロパティはその子孫にのみ適用されます。
  • バージョン 26 より前では、背景画像がクリップされ (たとえば、`background-image` スプライトを使用する場合) かつ `-webkit-print-color-adjust` が `exact` に設定されている場合、印刷時に背景が歪んで表示されます。 単色の背景とクリップされていない背景画像 (つまり、適用される要素よりも幅が狭くて短い背景) は正しく印刷されます。 バグ 40219905 を参照してください。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (6)
実装メモ
  • iOS 上の Safari は、`<body>` 要素の背景を印刷しません。 このプロパティが `<body>` 要素に対して `exact` に設定されている場合、そのプロパティはその子孫にのみ適用されます。

基本構文

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;
}

ライブデモ

ste-tasbadge

print-color-adjust ste-tasbadge demo.

プレビュー全画面表示

table. header

print-color-adjust table. header demo.

プレビュー全画面表示

graphba-

print-color-adjust graphba- demo.

プレビュー全画面表示

実務での使いどころ

  • 表・グラフの印刷

    データテーブルやグラフの背景色を印刷時にも維持して、情報の読み取りやすさを保つ。

  • ステータスバッジの印刷

    色で状態を表すバッジやラベルを、印刷時にも画面通りの色で出力する。

注意点

  • Chrome 136未満では -webkit-print-color-adjust を併記する必要がある。
  • ユーザーがインク節約のために背景を印刷しない設定にしている場合もあるため、過度に使わない。

フォールバック戦略

CSS 
.print-exact {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

アクセシビリティ

  • 色だけに依存せず、テキストラベルやパターンも併用して情報を伝達する。印刷時にモノクロになる可能性も考慮する。

参考リンク