白背景と薄いグレー背景はどちらが見やすい？WEBデザインで比較

WEBサイトの背景は、白と薄いグレーのどちらが見やすいのでしょうか。白は文章を連続して読む画面に、薄いグレーは白いカードを並べる画面に使う選択が考えられます。ただし、背景色だけで読みやすさが決まるわけではありません。文字との明暗差、情報の区切り方、写真やカードの配置を一緒に考える必要があります。プリンターのサポートサイトを例に、同じ文字色を使った2つの画面を比較します。

白と薄いグレーは、読み方と情報のまとまりで選ぶ

「印刷できないときの確認手順」のように説明文を上から順に読むページでは、ページ全体を白でそろえ、見出し・余白・番号付きの手順で段落を区切ると、背景色を頻繁に切り替えずに情報を追えます。一方、紙詰まり、接続、印刷品質などの質問をカードで並べる一覧では、外側を薄いグレー、各カードを白にすることで、情報のまとまりを作れます。

ただし、白いカードと薄いグレーの差は小さいため、背景の違いだけでカードの輪郭が十分に分かるとは限りません。白が常に読みやすい、薄いグレーが必ず目に優しい、とも断定できません。文字サイズ、余白、表示機器、周囲の明るさによって印象が変わるため、完成した画面で確かめます。

同じサポートサイトを白背景と薄いグレー背景で比較

例として、手順を詳しく読む記事ページは白 ■#FFFFFF、よくある質問（FAQ）の一覧ページは薄いグレー ■#F4F6F8 を全体の背景にします。HEXコードとは、WEBの色を16進数で指定する表記です。見出しや本文の文字色は両画面で変えず、背景によってどのような違いが出るかを確認します。

本文の青みを帯びた濃い色 ■#26384B は、白 ■#FFFFFF に対して約12.00:1、薄いグレー ■#F4F6F8 に対しても約11.08:1のコントラスト比です。補足文字 ■#536577 は白に対して約6.01:1、薄いグレーに対して約5.55:1です。コントラスト比とは2色の相対的な明るさの差で、文字と背景を組み合わせて確認するために使います。

見出し色 ■#182D43 と白 ■#FFFFFF の比は約14.04:1、薄いグレー ■#F4F6F8 とは約12.96:1です。この例では、同じ文字色でも両方の背景に十分な明暗差があります。背景を変えたからといって、見出しや本文の色まで必ず変更する必要はありません。

質問一覧の白いカード ■#FFFFFF と外側の薄いグレー ■#F4F6F8 の比はわずか約1.08:1です。カードの輪郭が識別に必要なら青灰の線 ■#74879A を加えます。この線は白に対して約3.70:1、薄いグレーに対して約3.42:1です。一方、淡い線 ■#D6E0E7 は白と約1.34:1、薄いグレーと約1.24:1なので、重要な境界ではなく装飾的な区切りに限定します。

「対処方法を見る」リンクには青 ■#1D5B87 と下線を組み合わせます。青は白 ■#FFFFFF に対して約7.25:1、薄いグレー ■#F4F6F8 に対して約6.69:1です。青いボタンに白文字 ■#FFFFFF を載せる場合も約7.25:1になります。リンクとボタンは色だけに頼らず、下線や形でも操作できることを伝えます。

背景を選んだ後は、細部とスマートフォンで再確認する

文章中心の画面には白、複数のカードを整理する画面には薄いグレー、というのは出発点です。長文でも表や注意書きが多ければ部分的な背景色が役立ちますし、カード一覧でも余白や枠線が十分なら全面を白にできます。背景色より先に「どこを読み、どこを選ぶのか」を決めると、不要な色分けを減らせます。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上が基準です。必要な入力欄の輪郭などの非テキスト情報にも、隣接色との3:1以上が求められる場合があります。ただし装飾的な線まで一律に同じ基準ではありません。

スマートフォンではカードが縦に並び、白い面の境界が分かりにくくなることがあります。見出し・余白・枠線と、文字の大きさを合わせて確認してください。掲載した数値は不透明な単色同士の計算結果で、すべての閲覧環境での快適さやページ全体の基準適合を保証するものではありません。

HueRollではHEXコードと濃淡の候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色の直接比較やAA・AAAの自動判定には対応していないため、薄いグレーと文字・枠線の組み合わせは別の方法でも検証しましょう。