k8o

はじめに

Webページを印刷する際、ブラウザは自動的に色やコントラストを調整することがあります。 これは印刷コストを削減し、テキストの可読性を向上させるためですが、そのWebページにとって色やコントラストが重要な場合には望ましくないです。

CSSのprint-color-adjustプロパティは、この動作に対してヒントを提供できます。

上記の設定を切り替えながら印刷プレビューを確認すると、設定によって色やスタイルが変化することを確認できます。

print-color-adjustプロパティの基本的な仕様

値はeconomy（初期値）とexactの2つがあります。print-color-adjustプロパティの値は親要素から子要素へ継承されます。

economy（初期値）

ユーザーエージェントが出力デバイスに応じて、スタイリングを調整することを許可します。

.content {
  print-color-adjust: economy; /* デフォルト値 */
}

CSSのプロパティに付与する値としては珍しい名前ですね。 ブラウザが自動的に調整することを許可する、つまり印刷コストの削減を優先する値なのでeconomyと名付けられているのでしょう。

exact

色とスタイリングをユーザーから指示があった時を除いて変更しないように指示します。

.preserve-design {
  print-color-adjust: exact;
}

各ブラウザがユーザーに提供する設定が優先されることには注意が必要です。

実用的な使用例

1. W3Cの例：地図サイトでの方向案内

仕様書では、exactが有効な例として道案内中の地図を印刷する状況を紹介しています。

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

.directions .step:nth-child(even) {
  background-color: var(--color-bg); /* 白 */
}

.directions .step:nth-child(odd) {
  background-color: var(--color-bg-light); /* ライトグレー */
}

上記のように、経路を白とライトグレーを交互に表示することで表現している場合、デフォルトでは白だけで印刷されてしまうため道順が読みにくくなります。

2. ブランドカラーの保持

そのサイト、サービス、企業の代表的な色を印刷時にも保持したい場合です（svgなどはデフォルトでも保持されることが多いです）。

.logo,
.brand-element {
  background-color: var(--color-primary); /* ブランドカラー */
  color: white;
  print-color-adjust: exact;
}

3. データ可視化での色分け保持

チャートやグラフで色による区別が重要な場合です。同じ色に印刷されてしまうと、情報が失われてしまいます。

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

.chart .series-1 {
  background-color: var(--color-blue-700); /* 青色 */
}
.chart .series-2 {
  background-color: var(--color-red-700); /* 赤色 */
}
.chart .series-3 {
  background-color: var(--color-green-700); /* 緑色 */
}

このケースに該当してprint-color-adjustを利用する場合は、先に色以外の方法で区別できるかを検討しましょう。

W3Cで紹介されるWebアクセシビリティのテクニック G111で詳しく紹介されています。

まとめ

print-color-adjustプロパティは、印刷時の色調整に対してユーザーエージェントにヒントを提供する有用な機能です。

適切に使用することで、印刷時でもデザインの意図を保ちながら、ユーザーフレンドリーな印刷体験を提供できます。 ただし、これはあくまでヒントであり、最終的な表示はユーザーの設定とブラウザの実装に依存することに注意が必要です。