シニア向けWEBサイトの配色はどう決める？文字と操作を見つけやすくする方法
シニア向けWEBサイトの配色では、落ち着いた色を選ぶだけでなく、文字を読めることと、申込みや問い合わせの操作を見つけられることを一緒に考える必要があります。年齢だけで利用者の見え方を決めつけず、文字を拡大する人やスマートフォンを使う人にも配慮しましょう。今回は架空の地域園芸教室の案内ページを例に、背景・文字・ボタン・入力欄の色を整理します。
文字は背景との差を確保し、操作は色と形で見分けられるようにする
最初に、ページの広い背景と本文の文字色を決めます。背景は明るく、文字は十分に濃い色にして、見出しと本文は基本的に同じ文字色を使います。見出しの大きさ・太さ・余白で内容の順序を示せば、見出しごとに強い色を増やさなくても情報を整理できます。
開催日時や参加費、連絡先は本文と同じくらい重要な情報です。補足として表示する場合も、文字を過度に薄くしないようにします。「電話で問い合わせる」は電話番号と下線付きリンクで示し、「見学を申し込む」は塗りつぶしボタンにするなど、操作の種類を文字と形でも分けます。クリックできる場所を色だけに任せないことが大切です。
申込みフォームの入力欄には枠線を付け、入力前でも欄の位置が分かるようにします。プレースホルダー（入力前に欄内へ表示する例文）だけを項目名にせず、「お名前」「連絡先」のラベルを常に表示します。操作部分に使うアクセントカラーは、特に目立たせたい場所に限定する色です。本文の見出しや飾りまで同じ色で埋める必要はありません。
地域の園芸教室を例にした7色の配色
園芸教室の案内と見学申込みを同じページに置く例です。HEXコードとは、WEBで使う色を「#」と6桁の英数字で指定する表記です。次の7色に役割を分けます。
- ページ背景：明るいアイボリー #FAF8F2 ― 説明文と案内全体の背景。
- 見出し・本文：濃い緑がかったグレー #263B3B ― 教室の内容、日時、料金、入力ラベル。
- 補足文字：落ち着いた灰緑 #53675F ― 所要時間、補足説明、更新日。
- 開催案内の面：淡い緑 #E7F1E9 ― 日時・会場・参加費をまとめる領域。
- 申込みボタン・リンク：深い青緑 #205D62 ― 「見学を申し込む」の背景と下線付きリンク。
- ボタン文字・入力欄：白 #FFFFFF ― ボタン内の文字と入力欄の面。
- 入力欄の枠線：濃い灰緑 #5E746B ― 白い入力欄の輪郭。
例えばページ背景を#FAF8F2にし、「園芸教室の見学案内」を#263B3Bで表示します。日時・場所・費用は#E7F1E9の案内面にまとめ、内容を#263B3B、補足を#53675Fで書きます。「見学を申し込む」ボタンには#205D62の背景と#FFFFFFの文字を使い、電話での問い合わせは#205D62の下線付きリンクとして区別します。この教室や申込み方法は配色説明用の架空の例で、実際の募集情報ではありません。
フォームの入力欄には#FFFFFFの背景と#5E746Bの枠線を使い、ラベルには#263B3Bを組み合わせます。枠線と白い入力欄のコントラスト比は約5.02:1、淡い案内面との比も約4.34:1です。入力欄を認識するための境界を、背景の淡い色の違いだけに頼らず示せます。
コントラスト比は、隣り合う色の相対的な明るさの差を表す数値です。本文#263B3Bとページ背景#FAF8F2は約11.16:1、補足文字#53675Fとページ背景は約5.69:1、案内面#E7F1E9の本文#263B3Bは約10.25:1、白文字#FFFFFFとボタン背景#205D62は約7.49:1です。いずれもWCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAが通常サイズの文字に求める4.5:1以上を満たします。ボタンと案内面も約6.48:1で、操作部分の視覚的な境界に用いる3:1の目安を上回ります。
文字の拡大・入力時・スマートフォンで仕上げを確認する
淡い案内面は見出しや枠で区切ります。淡い緑#E7F1E9とページ背景#FAF8F2の比は約1.09:1と小さいため、色の違いだけで「開催案内」を探させないようにします。見出しと余白を設け、必要に応じて#5E746Bの枠線を加えます。
文字を拡大しても使えるかを確かめます。ブラウザーで文字を200％程度に拡大したときに、日時・申込みボタン・入力欄が重なったり欠けたりしないかを確認します。文字の大きさだけでなく行間や折り返しにも配慮し、使う人が無理なく読み進められることを重視します。
操作の位置と状態は色以外でも伝えます。ボタンの押せる範囲と隣の操作との間隔を確保し、キーボードで選択中の場所を示す枠（フォーカス表示）を消さないようにします。入力エラーには「電話番号を確認してください」などの文章を添え、色だけで知らせないようにします。最後は実際のスマートフォンで、文字・入力欄・ボタン・電話リンクの順に探せるかを確認してください。