淡い色を大面積に使うWEBデザイン｜ぼやけず見せる方法
淡いグリーンやベージュをWEBサイトの広い背景に使うと、画面全体を明るい印象にまとめることができます。一方、背景だけでなく文字やボタンまで淡くすると、重要な情報がぼやけて見える場合があります。改善するには、背景を濃く塗り直す前に、文字・区切り・操作する場所の役割を分けるのが近道です。ここでは架空の植物観察会の募集ページを例に、淡い色を広く使いながら情報を見失わない配色を考えます。
淡い色は広く敷き、情報の優先順位は濃さと配置で示す
ページの冒頭から参加案内まで同じ淡い背景を続けても構いません。ただし、見出しと本文が背景に近い明るさだと、どこから読めばよいのか分かりにくくなります。背景を淡くするなら、文字には十分に濃い色を選び、見出しの大きさや上下の余白でも内容を整理します。
白い情報パネルを重ねれば必ず区切りがはっきりする、というわけでもありません。淡い背景と白の明るさが近い場合は、パネルの端が見えにくくなります。そこで、見出しを付ける、周囲に余白を設ける、必要な入力欄に輪郭を付けるなど、色の違い以外にも手掛かりを用意します。
全画面を淡い色で埋めることと、すべての要素を淡くすることは別です。ページの大部分を淡色に保ちつつ、読んでほしい文字や押してほしいボタンには濃い色を使う方が、色数をむやみに増やさずに済みます。
植物観察会の募集ページで使う具体的な配色
以下は画面上で使う色の提案です。HEXとは、色を「#」と0〜9・A〜Fの6桁で表すカラーコードの形式です。コントラスト比は、文字や部品と背景との相対的な明るさの違いを表します。
ページの広い背景と文字の組み合わせ
- ページ背景：淡いミントグリーン#E8F2EDを、観察会の紹介文から開催案内まで広く使います。
- 本文：濃い青緑がかったグレー#253A35を淡いミントグリーン#E8F2EDの上に置きます。コントラスト比は約10.58:1です。
- 見出し：深緑#1D5547を同じ背景#E8F2EDに合わせます。コントラスト比は約7.51:1です。
- 日時の補足など：落ち着いた灰緑#465F56を同じ背景#E8F2EDに使います。コントラスト比は約6.05:1で、補足文字も極端に薄くしません。
この例では、広い淡色の上に見出し・本文・補足の3段階を置きます。見出しは色の差だけでなく、文字の大きさと周囲の余白で区別します。文字を読ませる役割がない場所まで濃い帯で覆う必要はありません。
申込み欄だけ白い面を使い、ボタンを見つけやすくする
「集合場所・持ち物・申込み」をまとめる欄は白#FFFFFFの背景にします。ただし、白#FFFFFFと淡いミントグリーン#E8F2EDのコントラスト比は約1.14:1です。この色差だけでは境界が明確とは限らないため、欄の見出しと余白でまとまりを示します。
- 白い欄の本文には濃い青緑がかったグレー#253A35を使います。白背景#FFFFFFとのコントラスト比は約12.10:1です。
- 氏名などの入力欄は白#FFFFFFを背景とし、枠に灰緑#6B8078を使います。枠と白い内側のコントラスト比は約4.21:1です。入力欄には枠だけでなく「氏名」などのラベルも付けます。
- 「参加を申し込む」ボタンは濃い緑#175E4Eの背景と白#FFFFFFの文字を組み合わせます。文字とボタンのコントラスト比は約7.64:1、ボタンの背景と周囲の白い面の差も約7.64:1です。
淡い色をページ全体の主役として残し、申込みという操作にだけ濃い色を集中させる構成です。白い欄をページ中に何個も増やすのではなく、入力や確認が必要な部分に限定すると、広い淡色の連続性も保てます。
スマホや写真の上でも、ぼやけないか確認する
パソコンではまとまって見える淡色のページも、スマートフォンでは見出しと本文の間隔が詰まって見えることがあります。見出しから開催情報、申込みボタンへ順番にたどれるか、白い欄が単に背景の一部に見えていないかを確認します。
植物の写真を背景に重ねる場合は、葉や空など場所によって明るさが変わります。単色のコントラスト比をそのまま写真上の文字に当てはめず、必要に応じて文字の下に不透明な面を設けて組み合わせを確認してください。入力中の枠やキーボードで選択したときの表示も、通常時とは別に点検します。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字では3:1以上です。操作部品を識別するために必要な輪郭などには、隣接色との3:1以上が求められる場合があります。ここで示した比率は不透明な単色同士の計算値です。淡い背景の面積そのものより、実際に読む場所と操作する場所の見え方を確かめましょう。