WEBサイトで濃い色を大面積に使うときの配色ポイント
WEBサイトの大部分を濃い背景色にすると、写真や見出しを引き立てる構成を作れます。一方、文字やカード、ボタンまで暗い色でそろえると、どこに何があるのか分かりにくくなりがちです。濃い色を広く使う場合は、背景を何度も変えるより、情報を載せる面と文字の明るさを整理することが大切です。架空のミニシアターの上映案内ページを例に考えます。
暗い背景を広く使うなら、情報の階層を明るさと余白で作る
ページの冒頭から上映作品一覧、予約案内まで暗い背景を続ける場合、最初に背景の基準色を一つ決めます。作品ごとに背景を別の濃色に変えるよりも、見出しの大きさ、カードの間隔、文字の明るさをそろえた方が、内容を追いやすくなる場合があります。
背景より少し明るい色でカードを作る方法もあります。ただし暗い色同士は差が小さくなりやすいため、カードの色だけで境界を示さないようにします。上映作品名と開始時刻をまとめ、カード同士に間隔を設け、必要な場所だけ仕切り線を使います。写真が暗い場合は背景と溶け込まないかも確認してください。
明るい色は、すべての文字に同じ強さで使う必要はありません。作品名は明るい文字、上映時間などの補足情報は少し落ち着いた文字にすると、情報の順番を見せられます。ただし、補足文字を薄くしすぎないことが重要です。
ミニシアターの上映案内に使う具体的な配色例
ここではHEX（「#」の後ろに0〜9とA〜Fの6桁を並べるカラーコード）で色を指定します。コントラスト比は、文字などと背景の相対的な明るさの差を示す数値です。
背景・作品カード・文字を分ける
- ページの広い背景：深い青灰色#182631。上部の案内から作品一覧まで共通して使い、色面の切り替えを増やしません。
- 上映作品カード：背景より少し明るい青灰色#263743。作品名、上映日時、予約への案内を一つにまとめます。
- 作品名と本文：明るい白灰色#F4F6F7。ページ背景#182631上で約14.24:1、カード背景#263743上で約11.33:1のコントラスト比です。
- 日時などの補足文字：淡い灰青色#C6D0D5。カード背景#263743上で約7.83:1、ページ背景#182631上で約9.84:1です。
カード背景#263743とページ背景#182631のコントラスト比は約1.26:1なので、この色差だけでカードの境界が明確になるとは限りません。カードの間隔と見出しを保ち、区切りが必要なら灰青色#8496A1の線を使う方法があります。この線はカード背景#263743に対して約4.01:1です。
予約ボタンには明るい色を限定して使う
カード内の「上映時間とチケットを見る」ボタンは、淡い琥珀色#E9BC83の背景に深い青灰色#182631の文字を組み合わせます。文字とボタン背景のコントラスト比は約8.81:1、ボタンとカード背景#263743の差は約7.01:1です。明るいボタンが予約への目印になるよう、すべてのカードの飾りまで同じ色で塗らないようにします。
長いページやスマートフォンで確認したいこと
暗い背景が長く続くときは、上映作品のまとまりが分かるよう、作品名・時間・ボタンの並びを各カードで統一します。ポスター写真の明暗は作品によって異なるため、写真の上に直接文字を載せる場合は、単色背景の数値を流用せず、実際の重なりを確認してください。
スマートフォンでは、カードが縦に続くため、作品の切れ目と予約ボタンの位置が分かるかを点検します。キーボード操作でボタンが選択されたときの目印も、通常時の配色とは別に確認しましょう。色だけで上映中・終了などの状態を示さず、文字でも伝えることが必要です。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字では3:1以上です。操作に必要な輪郭や状態を示す図形などには、隣接色と3:1以上が求められる場合があります。ここで示した比率は不透明な色同士の計算値であり、完成画面のすべての状態を保証するものではありません。濃色の面積を保ちながら、文字・区切り・操作の役割を一つずつ確かめましょう。