WEBサイトのセクションごとに背景色を変えるときの配色ルール

WEBサイトのセクションごとに背景色を変えると、長いページでも話題の切り替わりを示せます。ただし、見出しが現れるたびに別の色を使うと、ページ全体がしま模様のようになり、どの情報がひとまとまりなのか分かりにくくなることがあります。背景色は装飾のために交互に置くのではなく、読む内容や次の行動が変わる場所を基準に切り替えましょう。ここでは地域の木材再利用ワークショップの参加案内ページを例に説明します。

背景色は見出しの数ではなく、情報のまとまりで切り替える

まず、ページに載せる内容を「イベントの概要」「材料と制作工程」「会場・安全上の案内」「参加申込み」に分けます。制作工程が3段階あっても、同じ作業の説明なら同じ背景のままで構いません。逆に、説明を読み終えて申込みへ進む場所では、背景に別の色を用意すると内容と操作の役割を分けやすくなります。

セクションとは、見出しとその説明などをまとめたページ内の区画です。背景色を決めるときは、隣り合う区画の色の差だけでなく、各区画に載る文字・見出し・カード・ボタンの色も一緒に確認します。コントラスト比は、隣り合う色の相対的な明るさの差を示す数値です。淡い色同士の境界を見分ける必要があるなら、色を増やす前に余白や区切り線も検討します。

背景の境目自体が意味を伝える唯一の手がかりにならないようにすることも大切です。「材料を選ぶ」「会場を確認する」「申し込む」といった見出しを用意すれば、背景の違いが小さくても情報の流れを追いやすくなります。

木材再利用ワークショップの案内ページを組み立てる配色例

古い木箱の材料を使った小物作りを紹介する、架空の参加募集ページを考えます。HEXはWEBで色を指定する16進数のコードです。濃い導入、明るい説明、淡い作業紹介、明るい実用案内、温かみのある申込み帯という順に配置します。

• 冒頭のイベント紹介：最初の短い案内面は深い緑■#31584Dに白■#FFFFFFのタイトルを載せます。文字と背景のコントラスト比は約7.97:1です。濃い色をページ全体に広げず、何のイベントかを伝える導入だけに使います。
• 開催概要と参加対象：日時・対象年齢・会場などは温かいオフホワイト■#F9F7F2にチャコール■#2C3C38で表示します。文字と背景は約10.83:1です。ここでは項目を読みやすく並べ、情報ごとに色付きの帯を追加しません。
• 共通の見出し：深い青緑■#2A594Dを使い、オフホワイト■#F9F7F2では約7.45:1、後述する淡いセージ■#E7EFE9では約6.80:1の文字コントラストを確保します。セクションの背景が変わっても見出し色をむやみに変えません。
• 材料紹介と制作工程：2つの話題を同じ作業の説明としてまとめ、淡いセージ■#E7EFE9の背景を連続して使います。本文をチャコール■#2C3C38にすると約9.90:1です。このセージと前のオフホワイト■#F9F7F2の差は約1.09:1なので、「材料」「制作の流れ」の見出しと十分な余白でも区切ります。
• 工程を並べるカード：各工程は白■#FFFFFFのカードにチャコール■#2C3C38で記載し、文字は約11.60:1です。白と周囲のセージ■#E7EFE9の差は約1.17:1と小さいため、必要な輪郭にはグレーグリーン■#73867Dを使います。枠線と白■#FFFFFFは約3.86:1、枠線とセージ■#E7EFE9は約3.30:1です。
• 会場案内と持ち物：工程の説明が終わったら、背景をオフホワイト■#F9F7F2に戻します。細かい注意や場所の説明もチャコール■#2C3C38で統一し、約10.83:1を維持します。背景の戻り方そのものが話題の切り替わりを補助します。
• 安全上の小さな注意欄：「作業用手袋を持参」などは、全面の新しいセクションにせず、淡い砂色■#F2E4CEの小さな案内面に濃い茶■#574432で記載します。文字と案内面は約7.36:1です。砂色とオフホワイト■#F9F7F2の差は約1.17:1なので、「安全上のお願い」の見出しも必ず付けます。
• 参加申込みのセクション：最後は淡いベージュ■#F5E9DAを背景に、チャコール■#2C3C38の説明と深い青緑■#2A594Dの見出しを置きます。文字は約9.69:1、見出しは約6.66:1です。ベージュと直前のオフホワイト■#F9F7F2の面同士は約1.12:1なので、余白と「参加申込み」の見出しで区画を示します。
• 「参加を申し込む」ボタン：申込み帯の中では赤茶■#8D452Fの背景に白■#FFFFFFの文字を使います。文字とボタンは約6.94:1、ボタンとベージュ■#F5E9DAは約5.80:1です。ボタンにキーボードのフォーカスがあるときは深い緑■#31584Dの輪郭線を加えれば、ベージュ■#F5E9DAと約6.66:1の差があります。
• 飾りの線と補足文字：セージ■#E7EFE9の工程紹介に淡いグレー緑■#C8D6CFの線を使うと約1.28:1です。見出しと余白で区切りが分かる場所の装飾線に限り、必要な入力欄の輪郭には流用しません。オフホワイト■#F9F7F2上の補足文字はグレー緑■#53645Eを使えば約5.85:1です。

このように背景を変えるのは、工程の小見出しが増えるタイミングではなく、読む目的が切り替わるタイミングです。淡いセージの中で複数の工程をまとめると、色の帯が細かく連続するのを防げます。

境界の見え方とボタンの配置を最後に確認する

淡い背景同士はコントラスト比が1:1に近くても、それだけで問題とは限りません。区画の意味を背景色だけに頼らず、見出し・配置・余白で伝えられているか確認します。一方、入力欄の輪郭や選択状態など、操作を識別するのに必要な視覚情報は十分な差が必要です。

赤茶■#8D452Fの申込みボタンを冒頭の深い緑■#31584Dへ移すと、ボタン面と周囲は約1.15:1しか違いません。明るい申込み帯で使うことを前提に決めた色を、そのまま暗いセクションにも使い回さないようにします。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が原則必要です。操作や状態を識別するのに不可欠な非テキスト情報は隣接色と3:1以上が基準ですが、意味を持たない装飾線や背景の切り替えすべてに同じ数値が適用されるわけではありません。

スマートフォンではセクションが長く見える場合があるため、背景色だけでなく各見出しの位置や余白も確認してください。HueRollでは関連色の候補や、選択した色と白・黒とのコントラストを確認できます。ただし、任意の2色の比較やAA・AAAの自動判定はできません。この記事で示した独自の色同士の比率は別途計算しています。