濃い背景色をWEBデザインで使うコツ｜文字色とアクセントの決め方
濃い背景色は、写真や重要な案内を引き立てるために使えます。ただし、背景だけを暗くして文字やボタンを元の色のままにすると、説明が読みにくくなったり、操作する場所が埋もれたりします。夜の星空観察会の案内ページを例に、見出し・本文・補足文・申込みボタンの色を一緒に決める方法を紹介します。
濃い背景では文字の役割ごとに明るさを変える
暗い背景には必ず真っ白な文字を載せる、という決まりはありません。大きな見出しは明るく、長めの説明は少し落ち着いた明るさにし、日時などの補足情報はさらに控えめな色にする方法があります。ただし、補足文を薄くしすぎてはいけません。いずれも読むための文字なので、実際の背景とのコントラスト比を確かめます。
コントラスト比とは、2色の相対的な明るさの差を示す数値です。背景と見出しの差だけでなく、背景と小さな文字の差も確認することが重要です。アクセントカラーは、画面全体へ広げるよりも、日時の強調や参加申込みなど、役割のある場所へ絞ると情報を整理しやすくなります。
星空観察会の案内ページで組み合わせる配色例
次のHEXコードは、WEB上の色を16進数で表す指定方法です。夜空を連想させる青系の濃い背景を軸に、観察内容・集合案内・参加操作の3か所を整えます。
紹介エリア：見出し・本文・補足文を分ける
- 広い背景：深いネイビー ■#152638。大見出し：少し黄みを含む明るい色 ■#F7F4EC。文字と背景は約13.98:1です。
- 観察内容の本文：淡い青灰 ■#D6E1E7。ネイビー背景 ■#152638と約11.55:1です。
- 天候に関する補足文：落ち着いた水色グレー ■#AFC2CB。同じ背景 ■#152638と約8.35:1です。補足文は小さくしすぎず、本文との位置や余白でも区別します。
集合案内カード：背景の差が小さければ境界線を付ける
集合時刻や持ち物は、少し明るい紺色 ■#243C50のカードにまとめます。ページ背景 ■#152638とカードの面の差は約1.34:1なので、色の面だけで区切るには弱い組み合わせです。カードの枠線として明るいグレー青 ■#A9BAC8を使えば、カード背景 ■#243C50とは約5.74:1、外側の背景 ■#152638とは約7.72:1になります。
カード内の説明は淡い青灰 ■#D6E1E7で、カード背景 ■#243C50と約8.59:1です。「持ち物を見る」は淡い青緑 ■#91DCD9の下線付きリンクとし、同じ背景 ■#243C50と約7.32:1を確保します。リンクは色だけでなく下線でもクリックできることを示します。
申込み操作：アクセントの黄色はボタンへ集中させる
「観察会に申し込む」ボタンには温かみのあるアンバー ■#F4C56Bを使い、ボタン文字は深いネイビー ■#152638にします。文字とボタンのコントラスト比は約9.55:1です。アンバーの面はネイビー背景 ■#152638に対して約9.55:1、カード背景 ■#243C50に置いても約7.10:1です。ボタンの色だけでは用途が分からないため、操作を表す言葉も入れます。
薄い文字・アクセント・操作状態の見落としを防ぐ
暗いページで補足文をさらに暗くすると、文字が消えかねません。たとえばグレー青 ■#7C8D9Aは、ページ背景 ■#152638と約4.49:1、カード背景 ■#243C50と約3.34:1です。通常サイズの文字に必要な4.5:1に届かないため、説明文には使わず、より明るい候補へ調整します。
また、アンバーを暗くした黄土色 ■#C39A4Fをカード背景 ■#243C50の小さな文字に使うと約4.38:1で、通常文字の基準に足りません。アクセント色も置く面によって使い分け、飾りと情報を伝える文字を混同しないようにしましょう。
ホバー（マウスを重ねた状態）では、申込みボタンを明るい黄色 ■#F8D99Cに変えても、濃い文字 ■#152638との比率は約11.27:1です。フォーカス（キーボードなどで操作対象になった状態）は、ボタンから少し間隔を空けた淡い黄色 ■#FFE49Cの輪郭で示す方法があります。輪郭とネイビー背景 ■#152638は約12.32:1、カード背景 ■#243C50とは約9.16:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBのアクセシビリティ指針）のAA水準では、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作部品の識別や状態に必要な非テキスト表示は隣接色と3:1以上が基準です。色の比率だけで完成とせず、写真の重なる部分、スマートフォンの狭い画面、キーボード操作でも確認しましょう。固定した濃色デザインは、利用者の端末設定に応じて切り替わるダークモードとは別に考えます。