白背景とダーク背景はどちらが合う？サイト内容から考える選び方
WEBサイトの背景は白とダークのどちらがよいのでしょうか。答えは、サイトで読んでほしい情報と、最初に見せたいものによって変わります。日程や料金を探すページと、写真で雰囲気を伝えるページでは、背景に求める役割が違います。ここでは星空観察イベントのサイトを例に、白背景とダーク背景の向き不向きと、具体的な配色を比較します。
情報を探すページには白、雰囲気を見せるページにはダークが候補
開催日・料金・会場へのアクセス・よくある質問などを読み比べてもらうなら、白背景を土台に文字や表を整理する方法が考えられます。明るい面に濃い文字を置き、重要なボタンだけ色を変えると、情報と操作の役割を分けやすくなります。
一方、星空の写真やイベントの世界観を先に見せたいページでは、ダーク背景が候補になります。写真の周囲を暗くして明るい被写体を引き立てられる場合がありますが、写真自体が暗いと輪郭が埋もれることもあります。ダーク背景なら必ず高級に見える、白背景なら必ず読みやすい、といった決まりはありません。
背景はサイト全体で一つに固定する必要もありません。たとえば案内・予約ページは白、写真を大きく見せる冒頭だけダークにする構成も可能です。ただしセクションごとに無秩序に切り替えると、内容が分断して見えるため、切り替える理由を決めましょう。
星空観察イベントを白背景とダーク背景で配色する
次の2案では、背景、本文、案内カード、申込ボタンの色を具体的に分けます。HEX（先頭の#と6桁の数字・英字で色を表すコード）を併記します。コントラスト比は、文字と背景など隣り合う色の相対的な明るさの差を示す数値です。
- 白背景案：ページ背景は白#FFFFFF、本文は濃いグレー#1F2937。文字と背景のコントラスト比は約14.68:1です。日程や持ち物を載せるカードには淡いグレー#F1F5F9を使い、その上も濃いグレー#1F2937の文字にして約13.40:1を確保します。申込ボタンは濃い青#1D4ED8、文字は白#FFFFFFで約6.70:1。必要な情報を順に読むページを想定した組み合わせです。
- ダーク背景案：ページ背景は深い紺#0F172A、本文は明るいグレー#F1F5F9で約16.30:1。イベント紹介のカードは少し明るい紺#1E293Bにし、同じ明るい文字#F1F5F9と組み合わせて約13.35:1です。申込ボタンは淡い青#93C5FD、文字は深い紺#0F172Aにすると約9.90:1。夜空の写真を見せる導入ページを想定しています。
カードの面を変えるだけでは、境界が十分に伝わらないことがあります。白#FFFFFFと淡いグレー#F1F5F9の差は約1.10:1、深い紺#0F172Aとカードの紺#1E293Bの差は約1.22:1です。操作できるカードなら、余白や見出しだけでなく明確な枠線も用意します。たとえばダーク案の枠線を青みのグレー#94A3B8にすると、カード背景#1E293Bとの比は約5.71:1です。
ボタンと写真上の文字は背景に合わせて確認する
ダーク背景では明るい色のボタンが目に入りやすい場合がありますが、淡い青#93C5FDの上に白文字#FFFFFFを置くと約1.80:1しかありません。同じボタンに深い紺#0F172Aの文字を使うと約9.90:1です。WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字に4.5:1以上、規定の大きな文字に3:1以上が必要です。色だけで操作を伝えず、「申し込む」といった文字も付けましょう。
写真の上に直接文字を重ねる場合は、写真の場所によって明るさが変わります。背景色と文字色の数値だけでは実際の読みやすさを判断できません。文字の後ろに不透明な色面を敷くなどして、実際に接する色で確認してください。明るい場所と暗い場所、スマートフォンの画面でも見直すとよいでしょう。
HueRollではHEXコードから関連色を探し、選択色と白・黒のコントラスト比を確認できます。ただし任意の2色の比較やWCAGの自動判定には対応していません。この記事の白・黒以外の組み合わせは別途計算しています。背景の印象だけでなく、掲載する情報・写真・操作のしやすさを一緒に確かめて選びましょう。