ダークカラーを使ったWEBデザイン｜重く見せない配色のポイント
ダークカラーを使うと、写真や見出しを際立たせるWEBデザインを作れます。ただし背景もカードも暗い色で埋めると、情報の区切りが弱くなり、画面全体が重く見えることがあります。濃い色を使う面積、暗色同士の境界、明るい面の入れ方を整理し、落ち着きと見やすさを両立する方法を紹介します。
濃い色を全面に広げず、明るさの異なる面を組み合わせる
最初に、ダークカラーをどこで使うか決めます。写真を印象的に見せたい冒頭や作品一覧は暗色にし、長い説明や利用案内は明るい背景へ切り替える方法があります。ページ全体を同じ濃さにしないことで、次の情報が始まる場所も分かりやすくなります。
暗いカードをさらに暗い背景に載せるときは、彩度（色の鮮やかさ）だけを変えても輪郭が出るとは限りません。カードの位置は余白と枠線で示し、文字との明度差（明るさの差）を十分に確保します。背景の青みや黒みを強くするより、役割ごとに明るさを決めることが重要です。
ダークカラーを使う目的は、黒い画面にすること自体ではありません。背景の暗さで写真や見出しを引き立て、必要な部分には明るい余白やアクセントを入れると、色数を増やさずに変化を付けられます。
星空写真の特設ページで使う配色例
星空写真の大きな紹介画面、写真カード、撮影についての解説を掲載する特設ページを例にします。HEX（ヘックス）は、WEBで色を16進数の数字と英字で指定するカラーコードです。
- 冒頭と写真一覧の背景：深いブルーブラック #1C2730。広い暗色面をこの1色にまとめ、夜空の写真を主役にします。
- 写真カードの背景：青みのあるチャコール #2B3942。ブルーブラック #1C2730 とのコントラスト比は約1.28:1と小さく、色の差だけでカードを区切るには不十分です。
- 見出し・主な説明文：やや温かいオフホワイト #F1F4F0。ブルーブラック #1C2730 の上で約13.70:1、チャコール #2B3942 の上で約10.72:1のコントラスト比です。
- 写真の撮影日などの補助文字：淡いブルーグレー #C5D5D3。チャコール #2B3942 の上で約7.83:1。補足だからといって文字を透過させすぎないようにします。
- カードの枠線：明るめのブルーグレー #889BA0。チャコール #2B3942 に対して約4.10:1、ブルーブラック #1C2730 に対して約5.24:1の差を確保します。
- 「写真一覧を見る」ボタン：柔らかいアンバー #E8B66F の背景に、濃い青灰色 #273238 の文字。文字とのコントラスト比は約7.10:1、ボタンと周囲のブルーブラック #1C2730 は約8.21:1です。
- 長い解説の背景：淡いグレーグリーン #EEF2ED。撮影方法などの文章は暗い写真エリアから切り替えて掲載します。
- 明るい解説面の文字：濃い青灰色 #273238。グレーグリーン #EEF2ED の上で約11.60:1です。暗い面と同じオフホワイト文字を流用しません。
暗い青系2色を背景に使い、淡い文字と枠線で情報を整理した上で、アンバーを主要なボタンや下線付きリンクに絞る組み合わせです。長文の部分だけ明るい面に切り替えるため、ページ全体が暗色一色になりません。
写真・スマホ表示・操作の状態を確認する
暗い星空写真を暗い背景へ置くと、写真の端が溶け込む場合があります。写真を実際の大きさで表示し、必要なら画像の余白や枠線を追加します。写真の上に文字を重ねる場合は、画像の場所によって明るさが違うため、文字を写真の外へ置くか、単色の面を使う方が確認しやすくなります。
スマートフォンでは、暗い面から明るい面への切替位置、ボタンの文言、写真カード同士の境界を確認します。リンクには下線を付け、現在位置や選択状態は色だけでなく文字や形でも示しましょう。暗い背景上の薄い文字も、実際の背景と組み合わせて確認することが必要です。
WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。操作に必要な枠線などの非テキスト要素は、隣接する色との3:1以上が基準です。上の組み合わせの比率は確認済みですが、画像・背景・文字色を変えた場所は改めて計算してください。