白とラベンダーで作るWeb配色｜背景の切り替え方

白とラベンダーを使うWebサイトでは、背景を交互に並べればよいのでしょうか。淡い色同士は切り替わりが分かりにくく、区画の役割まで曖昧になることがあります。ここでは白■#FFFFFFと淡いラベンダー■#ECE7FAを組み合わせ、手作りノートの販売ページを例に、背景を変える位置と文字・ボタンの色を考えます。HEX（ヘックス）はWebで色を指定する16進数のカラーコードです。

白は詳しい情報、ラベンダーは紹介や案内に使う

白■#FFFFFFは、商品の寸法・価格・配送条件など、文章や数字を続けて読む区画の背景に向いています。淡いラベンダー■#ECE7FAは、使い方の提案や購入案内など、読み進める目的が変わる区画の候補です。見出しが増えるたびに色を交互にするのではなく、話題のまとまりを基準に切り替えます。

両方の背景で文字色を変えすぎないことも大切です。見出しには濃い紫■#51406C、本文には暗い紫がかったグレー■#302940を使います。見出しと背景のコントラスト比は白で約9.13:1、ラベンダーで約7.56:1。本文はそれぞれ約13.84:1、約11.46:1です。コントラスト比は文字と背景の明るさの差を表す数値で、同じ文字色でも背景ごとに確認します。

手作りノートの販売ページで背景を切り替える2つの方法

方法A：商品写真を最初に見せたい場合。冒頭の商品写真と短い説明、続く価格・仕様の一覧は白■#FFFFFFにします。その後、ノートの使い方を紹介する区画だけ淡いラベンダー■#ECE7FAに切り替えます。最後に配送・返品の説明を白■#FFFFFFへ戻し、「購入方法」を案内する末尾を再びラベンダー■#ECE7FAにすると、読む情報と行動を分けられます。

購入案内の「商品を見る」ボタンは濃い紫■#51406Cを背景に、白■#FFFFFFの文字を載せます。文字とボタンは約9.13:1、ボタンと周囲のラベンダー■#ECE7FAは約7.56:1です。ボタンを白い区画に移しても周囲との比は約9.13:1なので、同じ操作色を保てます。

方法B：白っぽい商品写真が多い場合。冒頭をラベンダー■#ECE7FAにして、白い商品を囲む余白との差を付けます。商品写真を置く白■#FFFFFFのカードは周囲のラベンダーと約1.21:1しか差がないため、必要な輪郭にはくすんだ紫■#756484の枠線を付けます。枠線とカードの白は約5.37:1、周囲のラベンダーとは約4.44:1です。その下の細かな仕様と注文条件は白背景に戻します。

どちらの方法でも、背景の切り替え方を決める前に「写真を見せたいのか、説明を読ませたいのか」を整理すると、色の役割が決めやすくなります。

淡い境界と文字の読みやすさを確認する

白■#FFFFFFとラベンダー■#ECE7FAのコントラスト比は約1.21:1です。セクションの区切りを背景の違いだけに任せず、見出しと十分な上下の余白で情報のまとまりを示しましょう。一方、ラベンダー■#ECE7FAの上に白■#FFFFFFで説明文を書くのは、比率が約1.21:1で読みにくいため避けます。

WCAG 2.2というWebアクセシビリティの指針では、レベルAAで通常の文字に4.5:1以上、大きな文字に3:1以上を原則求めています。入力欄の枠や選択状態など、操作に必要な非テキスト情報には隣接色と3:1以上が求められる場合があります。ただし装飾目的の背景の境目すべてに3:1が必要なわけではありません。スマートフォンでも、区画の長さやボタンの位置を確かめましょう。

HueRollではHEX入力で色を選び、白・黒とのコントラストを確認できます。任意の2色間の比率やAA判定は自動表示されないため、ここで紹介した色同士の比率は別途計算しています。