黒っぽいWEBサイトが重く見える原因は？明るさを足す配色

黒っぽいWEBサイトは、写真やブランドの雰囲気に合っていても、ページを開いたときに「少し重い」と感じられることがあります。暗い色そのものが悪いのではありません。暗い面が長く続き、情報を読む場所まで同じ明るさに見えると、どこに注目すればよいか分かりにくくなります。小さな映画館の上映案内を例に、暗い世界観を残しながら明るい面を足す方法を紹介します。

重く見えるのは、暗い面が続いて情報の切れ目が見えないとき

映画のポスターを引き立てたいページなら、冒頭に暗い背景を使うのは自然な選択です。ただし、タイトルのある冒頭、上映時間、料金、座席予約までほぼ同じ暗さにすると、画面全体が一続きの面に見える場合があります。ここで見直したいのは、黒の使用そのものよりも明るい部分の置き場所と面積です。

例えば、ページ背景が青みのある黒■#171C24、上映情報カードが暗い青灰色■#242B34なら、2色のコントラスト比は約1.20:1です。2つの面を色だけでは区切りにくい組み合わせです。さらに補足文字を灰色■#879198にすると、カード背景■#242B34との比は約4.44:1で、通常サイズの文字の基準4.5:1にわずかに届きません。

一方で、黒い背景に明るい色を増やしすぎる必要もありません。ポスターと映画のタイトルが主役なら、冒頭の暗さを保ち、上映時間と予約内容を読む部分だけを明るくする方法があります。「すべてを明るくする」より、暗い部分と明るい部分の役割を分けます。

映画館の上映案内で、暗い冒頭を残して情報欄を明るくする

架空のミニシアターの特集上映ページを想定します。映画の写真やタイトルが並ぶ最初の領域は、青みのある黒■#171C24のままにします。タイトルは温かみのある白■#F0EEE7、作品の短い紹介は淡い青灰色■#CAD2D7にし、小さな装飾線に落ち着いた金色■#D1A46Cを使います。上映時間や料金のエリアには明るいアイボリー■#F5F1E8を足し、情報カードは白■#FFFFFFに変えます。

変更前の暗い予約ボタン■#313E49とカード■#242B34の比は約1.30:1です。白いボタン文字■#FFFFFFと暗いボタン■#313E49は約10.96:1あっても、ボタンの色面自体は周囲に埋もれがちです。変更後は明るいエリア■#F5F1E8を設け、その中の予約ボタン■#285C60と背景の比を約6.68:1にします。主要操作と周囲の情報を区別しやすくする例です。

実装時は、映画写真とタイトルを暗い冒頭に残し、上映日時・料金・予約の部分に別の背景色を割り当てます。CSS（WEBページの見た目を指定する仕組み）では、例えば次のように背景を役割で分けられます。

.cinema-hero {
  background-color: rgb(23 28 36);
  color: rgb(240 238 231);
}
.cinema-program {
  background-color: rgb(245 241 232);
  padding: 32px 20px;
}
.cinema-program-card {
  background-color: rgb(255 255 255);
  color: rgb(41 53 61);
  border: 2px solid rgb(101 119 128);
}
.cinema-booking {
  background-color: rgb(40 92 96);
  color: rgb(255 255 255);
}

明るい面を追加したら、文字・カード境界・操作色を確認する

HEX（16進数で色を示すWEB用コード）で指定した色は、実際に隣り合う背景と組み合わせて確認します。暗い冒頭■#171C24に置く温かい白のタイトル■#F0EEE7は約14.73:1、淡い青灰色の紹介文■#CAD2D7は約11.17:1です。白い情報カード■#FFFFFFの上では、見出し■#29353Dが約12.57:1、説明文■#47545Cが約7.80:1になります。時間欄の文字■#3A4B50と淡いグレージュ■#E8E0D2は約6.96:1、予約ボタンの白文字■#FFFFFFと青緑の背景■#285C60は約7.53:1です。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2では、通常サイズの文字に原則4.5:1以上、規定の大きな文字に3:1以上のコントラストが求められます。明るいエリア■#F5F1E8と白いカード■#FFFFFFの比は約1.13:1なので、カードの輪郭が情報の理解に必要な場合は枠線■#657780を追加します。枠線はカードの白■#FFFFFFと約4.66:1、外側のアイボリー■#F5F1E8と約4.14:1です。重要なUI（画面の操作部品）の境界などでは、隣接色との非テキストコントラストも確認します。

暗い部分の面積を減らしても、写真やポスターの色をすべて明るく補正する必要はありません。掲載する作品によって印象は変わるため、実際の画像と文字を並べて、スマートフォンでも上映時間から座席予約まで追えるかを点検します。HueRollでは色のHEX値やティント（明るい関連色）・シェード（暗い関連色）を確認できますが、コントラスト表示は選択色と白・黒との比較に限られ、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した2色間の比率は別途計算した値です。