白と緑のWebサイト配色｜すっきり見せる背景とボタンの組み合わせ

白と緑のWebサイトをすっきり見せるには、白い背景を広く取り、濃い緑を見出しや主要なボタンに絞ると組み立てやすくなります。ただし、白と淡い緑だけでカードを分けたり、緑のボタンに薄い文字を載せたりすると、情報が見づらくなる場合があります。園芸ワークショップの予約ページを例に、背景とボタンの色を入れ替えて比較します。

白い背景を基本に、濃い緑を見出しとボタンへ

白は■#FFFFFF、深い緑は■#246347を今回の基準色とします。HEX（ヘックス）は、Webの色を「#」と6桁の英数字で指定する方法です。白い背景に深い緑の見出しを置くと、コントラスト比は約7.12:1です。コントラスト比は2色の相対的な明るさの差を示し、文字と背景の見分けやすさを確認する目安になります。

説明文は緑にそろえる必要はありません。濃いチャコール■#293930を白■#FFFFFFに合わせれば約12.19:1で、見出しと本文の役割を分けられます。「講座を予約する」のボタンを緑■#246347、文字を白■#FFFFFFにすると約7.12:1です。ボタン自体も周囲の白い背景とはっきり区別できます。

使う色を増やすより、緑が「案内の見出し」「次の操作」という共通の役割を持つように決めておくことが、ページ全体を整理するポイントです。

園芸ワークショップの予約ページで2つの背景を比べる

植物の育て方を学ぶ体験講座のサイトを想定します。講座の説明、日程と参加費、予約案内を同じページに置く場合、次の色を役割別に使えます。

• 白を主役にする案：ページ上部を白■#FFFFFFにして、講座名の見出しを濃い緑■#246347、説明文をチャコール■#293930にします。予約ボタンは緑■#246347の面に白■#FFFFFFの文字を置きます。講座一覧は淡い緑■#E7F2EAの背景に切り替え、白■#FFFFFFのカードを並べます。カードの本文をチャコール■#293930にすれば、淡い緑の背景でも約10.62:1です。
• 緑の案内帯を主役にする案：ページ上部の短い案内帯を濃い緑■#246347にし、講座名と案内の文字を白■#FFFFFFにします。帯の中の予約ボタンは白■#FFFFFFの面に緑■#246347の文字を置きます。いずれの文字と背景の組み合わせも約7.12:1です。帯より下は白■#FFFFFFに戻し、日程や参加費を落ち着いて読めるようにします。

前者は講座の説明や写真を広く見せたいとき、後者は最初に予約案内を伝えたいときの一例です。両方とも主要な操作を一つに決め、講座カードに別々の濃い緑のボタンを増やしすぎないようにします。

淡い緑のカードとボタンの境界も確認する

白■#FFFFFFのカードを淡い緑■#E7F2EAの上に置いた場合、背景同士のコントラスト比は約1.15:1です。カードの境界が必要なら、グレーがかった緑■#647D6Cの枠線を使う方法があります。枠線と白は約4.48:1、淡い緑とは約3.90:1です。ただし飾りのカードすべてに枠線が必須というわけではなく、余白や見出しでもまとまりを示せます。

また、薄いミントグリーン■#BFDCC7に白■#FFFFFFの文字を載せると、約1.47:1しかありません。ミント色のボタンが白いページに隣接する場合も、面同士の差は同じ約1.47:1です。見た目を淡くまとめたい場合でも、主要ボタンの面には濃い緑■#246347を使い、操作する場所を明確にします。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字には原則4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。また、入力欄の輪郭など操作の識別に必要な視覚的手がかりには、隣接する色と原則3:1以上が必要です。申込み済みなどの状態は色だけでなく文字でも示し、スマートフォンでもボタンと入力欄を確認しましょう。

HueRollでは色のHEXを調整し、配色候補や選択色と白・黒のコントラストを確認できます。一方、任意の2色同士の比較やWCAGの自動判定はできません。ここで示した淡い背景・文字・輪郭線の比率は、別途2色ずつ計算して確認しています。