WEBサイトの背景色はどう選ぶ？読みやすく見やすい色の決め方

TIPS

WEBサイトの背景色は、好きな色だけでなく「何を、どのくらい読んでもらうか」から選ぶと決めやすくなります。文章が多い案内ページと写真を大きく見せるページでは、合う背景が同じとは限りません。科学館の来館案内を例に、明るい中立色・淡い青灰・濃い青灰の3案を比較し、文字や操作部分まで一緒に決める方法を紹介します。

背景色は情報量・文字・操作の順に確かめる

まず、ページで読んでほしい情報を並べます。科学館なら「展示の概要」「開館案内」「来館日を選ぶ」「チケットを申し込む」などです。長い説明を読む場所は、文字と明るさの差を確保できる落ち着いた面から考えます。写真を大きく見せたい場所では、濃い背景も候補になります。

背景を決めたら、見出し・本文・補足文字を実際に置いて確認します。コントラスト比とは、2色の相対的な明るさの差を表す数値です。色相（青や赤などの色の種類）が違っていても、明るさが近ければ読みにくい組み合わせになります。ボタンの文字と塗り色、選択できるカードとその周囲も、別々の組み合わせとして調べます。

科学館の来館案内で背景色を比較する3つの案

次の3つは、同じ案内ページを制作するときの代替案です。すべての背景を1ページに入れる提案ではありません。色を表すHEXは、WEBで色を16進数のコードで指定する形式です。

1．説明文が多い場合：明るい中立色

ページ背景は温かみのあるオフホワイト ■#FAF9F6。見出しは深い青灰 ■#214E60で約8.59:1、本文はチャコール ■#283740で約11.66:1です。
開館時間などの補足文字にはグレー青 ■#56636Bを使い、背景 ■#FAF9F6と約5.88:1にします。「チケットを申し込む」ボタンは深い青緑 ■#205B52に白文字 ■#FFFFFFで約7.84:1。ボタンとページ背景 ■#FAF9F6も約7.44:1です。

説明の多い画面では、強い背景色よりも段落や見出しのまとまりを優先する案です。広い面の色を控えめにし、操作する場所に濃い色を残せます。

2．日程を選ぶ場合：淡い青灰と白いカード

日程選択画面の背景を淡い青灰 ■#EAF2F4にし、本文はチャコール ■#283740で約10.82:1、補足文字はグレー青 ■#56636Bで約5.45:1です。
日程カードは白 ■#FFFFFFにしますが、背景 ■#EAF2F4との差は約1.13:1しかありません。日程カード全体を選択する操作にするなら、グレー青 ■#70818Aの枠線を加えます。枠線と白いカード ■#FFFFFFは約4.04:1、外側の青灰 ■#EAF2F4とは約3.56:1です。

選択中の日程は枠線の色だけで示さず、「選択中」の文字やチェック表示も付けます。ボタンに深い青緑 ■#205B52を使えば、淡い青灰の背景 ■#EAF2F4と約6.91:1の差があります。

3．写真を主役にする場合：濃い青灰

展示写真を大きく見せる構成なら、背景を濃い青灰 ■#223442にし、見出しをほぼ白 ■#F9FAFCで約12.28:1、説明を淡い青灰 ■#E6EDF0で約10.83:1にする案があります。申込みボタンは明るいアンバー ■#F0C879、文字は濃い青灰 ■#23323Bにすると約8.32:1です。ボタンと暗い背景 ■#223442にも約8.09:1の差があります。

ただし、このアンバー ■#F0C879を明るいオフホワイト背景 ■#FAF9F6にそのまま移すと約1.51:1しかありません。背景を変えるときはアクセントも見直します。

色を決めた後は小さな文字・境界・表示条件を確認する

たとえば淡い青灰 ■#EAF2F4に薄いグレー ■#9AA8AEで補足文を書くと約2.16:1で、通常サイズの文字には不十分です。白いカード ■#FFFFFFに薄い線 ■#DCE5E7を付けても約1.28:1しかありません。線が操作範囲を知らせるために必要なら、より濃い枠線へ変更します。

フォーカス（キーボードなどで操作対象になった状態）には、ボタンから少し離した輪郭を付けます。明るい背景 ■#FAF9F6では濃い青 ■#244B73の輪郭が約8.56:1、暗い背景 ■#223442では淡い黄色 ■#F4DD9Bの輪郭が約9.56:1です。マウスを重ねたホバーだけで操作中の位置を表さないようにします。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、大きな文字には3:1以上が必要です。操作部品の識別や状態に不可欠な非テキスト表示には隣接色との3:1以上が求められます。装飾的な線すべてに同じ基準が必要なわけではありません。最後にスマートフォン、写真の明暗が変わる場所、文字の折り返しを確かめ、案内の読みやすさから背景を選んでください。