Webページをそのまま印刷したら、画面では色分けされていた表が、真っ白なただの枠になって出てきた。そんな経験はありませんか。
色を塗り分けた比較表を会議用に刷ったのに、肝心の色が全部飛んでいて区別がつかない。見出しの帯も、ボタンの色も、マーカーみたいな下地も、きれいさっぱり消えている。しかも文字だけはちゃんと出ているので、余計に「なんで色だけ？」となります。
プリンターが壊れたのか、インクが切れかけているのか。私も最初はそう思って、プリンターのプロパティを上から下まで探し回りました。用紙設定を変えたり、ドライバーを入れ直したり。結局それは全部ムダ足で、答えはプリンターではなくブラウザの印刷画面の中に、しかもチェックボックス1つとして転がっていました。
これ、知らないとまず見つかりません。印刷設定の下のほう、初期状態では折りたたまれている場所に隠れているからです。しかもブラウザごとに項目の名前が微妙に違うので、検索してもピンポイントの答えにたどり着きにくい。私が遠回りしたのも、たぶんそのせいです。
この記事では、Webページの背景色が印刷されない理由と、Chrome・Edge・Firefox・Safariそれぞれで背景を印刷する設定手順、チェックを入れても色が出ないときの確認ポイント、さらにサイトを作る側がCSSで背景を出す方法までまとめて解説します。
作業自体は1分もかかりません。ただ、原因を知らないまま設定だけ変えると「今回は出たけど次はまた白かった」となりがちなので、まずはなぜ消えるのかから押さえていきましょう。
ブラウザは「わざと」背景色を印刷していません
いきなり結論ですが、Webページの背景色や背景画像が紙に出ないのは、ブラウザが最初からそう動くように作られているからです。バグでも設定崩れでもありません。
理由は大きく2つ。インクの節約と、紙の上での読みやすさです。
画面で見ると格好いい濃いグレーの背景も、A4いっぱいに刷るとインクをごっそり食います。しかも黒っぽい下地に濃い文字が乗っていると、紙では途端に読みにくくなる。そこでブラウザは「印刷のときは背景を落として、文字は紙で読みやすい方向に寄せる」という省エネモードを標準にしています。
この振る舞いはCSSの仕様にもきちんと書かれていて、economy（節約）という名前がついています。そして初期値がこのeconomyです。
つまり背景が出ないのは不具合ではなく、仕様どおりの正常動作です。直すには「今回は背景も込みで刷りたい」とブラウザ側に伝えてあげるだけで済みます。
もうひとつ、勘違いしやすいポイントを。この省エネモードが消すのは、あくまでCSSで指定された背景です。background-colorで塗った色や、background-imageで敷いた画像が対象になります。
一方で、<img>タグで貼られた写真やイラストはコンテンツ扱いなので、そのまま印刷されます。「写真は出るのに表のセルの塗りだけ消える」という不思議な現象は、これが理由です。表のセルの色は写真ではなく背景色だから消える、というわけですね。
Chromeで背景色を印刷する設定
ではChromeから。手順はこれだけです。
- 印刷したいページを開いて
Ctrl+P（MacはCommand+P）を押す - 印刷プレビュー画面の右側、下のほうにある「詳細設定」（環境によっては「その他の設定」）をクリックして開く
- スクロールして「背景のグラフィック」にチェックを入れる
チェックを入れた瞬間、左側のプレビューに色が戻ってきます。ここでプレビューが色付きになっていれば、あとは印刷するだけです。
ポイントは、この項目が初期状態では折りたたまれた中に隠れているところ。「詳細設定」を開かない限り目に入らないので、探しても見つからないのは当然なんです。
ちなみにこのチェックはページごとに毎回リセットされるわけではなく、Chromeが前回の状態を覚えていてくれます。一度入れておけば、次に別のページを印刷するときも入ったままになっていることが多いです。逆に言うと、意図せず全部のページが色付きで刷られるようになるので、インクが気になる人は普段はオフに戻しておくのが無難です。
参考：Chrome ヘルプ
Edge・Firefox・Safariでの設定場所
ブラウザが違うと項目名も微妙に変わります。それぞれ見ていきましょう。
Microsoft Edge
Edgeもほぼ同じ流れです。Ctrl+P（MacはCommand+P）で印刷ダイアログを開き、「その他の設定」を展開して「背景のグラフィック」にチェックを入れます。
Microsoftの公式ヘルプにも、Webページの背景を印刷結果に含めるかどうかを切り替える項目として説明があります。さらに「印刷プレビューまたは出力が印刷するWebページと異なる場合は、背景のグラフィックを含める必要があります」という注記まで書かれています。要するに、公式も「画面と違うならまずここを見ろ」と言っているわけです。
Firefox
Firefoxは項目名が違います。印刷画面を開いて「詳細設定」を展開すると、「背景色と背景画像も印刷」というチェック項目があります。ここにチェックを入れると背景が出ます。
Firefoxにはもうひとつ、印刷まわりで押さえておきたい機能があります。印刷形式で「ページを単純化」を選ぶと、広告やナビゲーションを取り払った読みやすいレイアウトで印刷できるというもの。これはこれで便利なのですが、単純化した時点でデザインが作り替えられるため、元ページの背景色は当然出てきません。
「背景のチェックを入れたのに色が出ない」というときは、こちらが有効になっていないか合わせて見てみてください。
参考：Firefox ヘルプ
Safari（Mac）
Safariの場合はCommand+Pで印刷ダイアログを開き、詳細オプションの中にある「背景をプリント」にあたる項目にチェックを入れます。Macの印刷ダイアログはバージョンによって表示が畳まれていることがあるので、「詳細を表示」を押して全部の項目を出してから探すのが早いです。
Safariは印刷ダイアログの見た目がOSのバージョンで変わりやすいので、項目名が完全一致しないこともあります。「背景」という単語が入ったチェック項目を探す、と覚えておけばだいたい迷いません。
チェックを入れても背景が出ないときの確認ポイント
ここまでで9割は解決するはずですが、それでも白いまま出てくることがあります。私が実際につまずいた順に、確認ポイントを並べておきます。
まず見るべきは印刷プレビューです。プレビューの時点で色が付いていないなら原因はブラウザ側、プレビューは色付きなのに紙が白いならプリンター側。ここで切り分けると、あとの調査がぐっと速くなります。
プレビューが白いままの場合は、次を疑ってみてください。
- 「システムダイアログを使用して印刷」から刷っていないか。この経路だとブラウザ側の印刷設定を経由しないため、背景のチェックが反映されないことがあります
- サイト側が印刷用のCSS（
@media print）で意図的に背景を消している。この場合は読者側の設定では戻せません - 広告ブロックや印刷整形系の拡張機能が働いている。シークレットウィンドウで同じページを開いて印刷プレビューを見ると、拡張機能の影響かどうかすぐ分かります
プレビューは色付きなのに紙が白い、あるいは色が薄いという場合は、プリンター側です。
- 「モノクロ」「グレースケール」が選ばれていないか
- 「ドラフト」「エコノミー」「インク節約」といった品質設定になっていないか
- カラーインクが本当に切れていないか（ノズルチェックで確認）
切り分けの裏ワザとして、印刷先を「PDFに保存」にしてみるのもおすすめです。PDFに色が乗っていればブラウザ設定は正解で、犯人はプリンター側だと確定します。紙を1枚も無駄にせず確認できるので、私はいつもこれで当たりをつけています。
関連記事：エクセルの印刷時に図形の位置がずれる場合の解決方法
サイトを作る側の対処：CSSのprint-color-adjust
ここからは自分でWebページを作っている人向けの話です。
料金表やチェックシートのように「色分けが情報そのもの」というページだと、読者に毎回チェックを入れてもらうのは現実的ではありません。そこで使うのがprint-color-adjustというCSSプロパティです。
値にexactを指定すると、「この要素の色は考えて作ってあるので、勝手に省略しないでほしい」とブラウザに伝えられます。初期値がeconomyなので、それを上書きするイメージですね。
@media print {
.price-table th {
background-color: #e8f0fe !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}背景色の指定に!importantを添えているのは、ブラウザの印刷用スタイルに負けないようにするためです。プレフィックス付きの-webkit-print-color-adjustも併記しておくと、古めのChromeやSafariまで押さえられます。
ただし、これを書けば必ず色が出ると考えるのは危険です。CSSの仕様上、ユーザーが印刷ダイアログで選んだ設定のほうがprint-color-adjustの指定より優先されると明記されています。あくまで「初期状態でも色が出やすくなる」程度に考えて、色に頼りきらない作りにしておくのが安全です。
なおprint-color-adjustは2025年5月時点で主要ブラウザの最新版に出そろった、いわゆるBaseline入りのプロパティです。今から書く分には、標準の書き方を主役にして問題ありません。
参考：MDN Web Docs
色に頼らず「線」で伝えるという逃げ道
もう一歩踏み込んだ話を。印刷で色が出るかどうかはユーザーの設定次第、プリンターの状態次第です。ということは、色でしか区別できない表は、紙になった瞬間に情報が半分死にます。
そこで私がよくやるのが、印刷時だけ背景を捨てて、罫線と太字に置き換えるという手です。
@media print {
.price-table th {
background: none !important;
border: 2px solid #333;
font-weight: bold;
}
}これなら白黒印刷でもヘッダー行がはっきり分かりますし、インクも食いません。カラー印刷を前提にできない配布資料では、こちらのほうが結果的に喜ばれます。
色覚特性の面から見ても、色だけに意味を持たせない作りは有効です。画面用は色で、紙用は線と文字の太さで。同じ情報を2通りの手段で伝えておくと、どちらの環境でも崩れません。
ちなみに印刷用CSSの動作確認は、いちいち紙に出さなくても大丈夫です。ChromeのDevToolsで表示をprintメディアにエミュレートすれば、画面上で印刷時の見た目を確認しながら調整できます。これを知ってから、印刷まわりの作業時間が体感で半分になりました。
まとめ
Webページの背景色が印刷されない問題について、原因と直し方を見てきました。
やることは拍子抜けするほど単純で、印刷画面の「詳細設定」や「その他の設定」を開いて、「背景のグラフィック」（Firefoxなら「背景色と背景画像も印刷」）にチェックを入れるだけ。プリンターの設定をいくらいじっても解決しないのは、そもそもブラウザが背景を渡していなかったからです。
それでも色が出ないときは、印刷プレビューを見て切り分けるのが最短ルートでした。プレビューが白ければブラウザ側、プレビューが色付きなのに紙が白ければプリンター側。印刷先を「PDFに保存」にすれば、紙を無駄にせず判定できます。
サイトを作る側なら、print-color-adjust: exactで初期状態から色が出やすくできます。ただしユーザーの印刷設定のほうが優先される仕様なので、色頼みの表は避けて、罫線や太字でも意味が通るようにしておくと安心です。
背景が消えるのは故障ではなくブラウザの節約仕様であり、チェックボックス1つで解決できる、というのがこの記事の要点です。
個人的な一押しは、印刷前に必ずプレビューを見るクセをつけること。背景に限らず、レイアウトの崩れも文字切れも、刷る前に気づけます。色分けした資料なら、プレビューに色が乗っているかどうかを見るだけで十分です。たった数秒の確認で、刷り直しの手間がまるごと消えます。今日から印刷ボタンを押す手を一拍だけ止めてみると、無駄になる紙がぐっと減りますよ。
