WEBデザインの背景色を階層ごとに変える方法｜ページに奥行きを出す配色

TIPS

WEBデザインで背景色を階層ごとに変えると、境界線や強い影を増やさなくても「ページ全体」「大きなセクション」「情報を載せるSurface（面）」の前後関係を整理できます。ここでいう階層は、HTMLの見出し階層ではなく、画面上の奥行きを表す視覚的な層です。色相を大きく変えるより、同じ系統の淡い色を少しずつ明るくすると、ページ全体を一体化しやすくなります。

外側から内側へ、少しずつ明るくする

以下のHEX（Webで色を表す16進数コード）例では、ページ全体のベース背景を淡いバイオレット ■#EDE9FE、大きなセクション背景をさらに明るいバイオレット ■#F5F3FF、記事カードや設定パネルなど最前面のSurfaceを白 ■#FFFFFF にします。

■#EDE9FE と ■#F5F3FF のコントラスト比は約1.08:1、■#F5F3FF と ■#FFFFFF は約1.10:1です。大きな面同士の装飾的な差としては控えめなので、余白やセクションの配置と組み合わせて使います。CSSでは background-color で各要素の背景色を個別に指定できます。

文字色は背景階層が変わっても読みやすさを保つ

見出しをダークバイオレット ■#312E81 にすると、ベース背景 ■#EDE9FE に対して約9.62:1、セクション背景 ■#F5F3FF に対して約10.42:1、白 ■#FFFFFF に対して約11.42:1です。本文をダークブルーグレー ■#334155 にすると、それぞれ約8.72:1、約9.44:1、約10.35:1になります。

リンクや主要な操作だけにパープル ■#6D28D9 を使うと、■#EDE9FE に対して約5.98:1、■#F5F3FF に対して約6.48:1、白 ■#FFFFFF に対して約7.10:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上が基準です。背景の層を変えるときも、文字と実際の背景の組み合わせを確認します。

背景の色差だけで操作部品を区切らない

この例の背景階層は、ページのまとまりや奥行きを補助するためのもので、操作部品の境界を示すための3:1の差を作っているわけではありません。W3CのNon-text Contrastでは、ボタンや入力欄などの存在や状態を識別するために必要な視覚情報には、隣接色との3:1以上が求められます。操作部品では、淡い背景差だけに頼らず、十分な文字・アイコン・必要な境界線やフォーカス表示を組み合わせます。

階層を増やしすぎると、どの面が上なのか分かりにくくなるため、まずは「ページ背景」「セクション」「Surface」の3段階程度から始めると整理しやすくなります。HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、今回のような背景同士や文字との組み合わせは別途確認します。