色だけで情報を伝えないWEBデザイン｜配色とアクセシビリティの基本

WEBサイトで「赤い欄を直してください」「青い文字を押してください」と案内しても、色の違いが分かりにくい環境では操作に迷うことがあります。色は視線を導く便利な手段ですが、情報の意味や操作方法を色だけに任せない設計が必要です。リンク、選択状態、入力フォームを例に、配色と色以外の手掛かりを一緒に考えます。

色だけが手掛かりになっている場所を探す

まずページを見渡し、色を消したら何が分からなくなるか考えます。本文中のリンクが青い文字だけ、選択中の項目が背景色だけ、必須欄や入力エラーが赤い枠だけで示されていないでしょうか。グラフでも「青がA、赤がB」と色名だけで項目を説明していると、対応を見失う場合があります。

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2の「色の使用」は、情報や操作を伝える唯一の視覚的手段として色を使わないことを求めるレベルAの基準です。色を使うこと自体は禁止されていません。文字、下線、形、位置などの別の手掛かりも用意することが基本です。

何を追加するかは用途で変えます。リンクには下線、選択中の項目にはチェックマークと「選択中」の表記、フォームには「必須」や修正内容、図表には名称と数値を付ける方法があります。色だけでなく、必要な情報が文章として読めるかを確認します。

申込画面で色・文字・形を組み合わせる

架空のイベント申込ページを考えます。背景を白 ■#FFFFFF、本文と項目名を濃い青灰 ■#243447 にすると、文字のコントラスト比は約12.67:1です。HEXコードとは、色を16進数で示す表記です。この落ち着いた文字色を基準に、操作が必要な場所だけ色を加えます。

「参加条件を見る」という本文中のリンクは、青 ■#235C7B にして下線を付けます。白背景 ■#FFFFFF との比は約7.27:1です。青が分かりにくくても下線からリンクを探せるようにし、リンク先が分かる文言を使います。

参加方法を選ぶ部分では、「✓ オンライン参加（選択中）」と表示し、淡い青灰 ■#EDF4F8 の背景と青 ■#235C7B の枠を使います。枠と淡い背景の比は約6.54:1、濃い文字 ■#243447 と淡い背景の比は約11.40:1です。未選択の「会場参加」にもラベルを付け、ラジオボタンなどの選択操作を分かる形で示します。淡い背景色だけで選択状態を判断させない構成です。

メールアドレスが空欄なら、欄の近くに「! メールアドレスは必須です」と表示します。淡い赤みの背景 ■#FFF1EC に濃い赤茶 ■#8E3D30 の文字を使うと約6.66:1です。赤い枠だけにせず、何を入力すべきかを文字で説明します。通常の入力欄は白背景 ■#FFFFFF にグレー ■#657585 の枠を使うと約4.73:1です。

最後の「申し込む」ボタンは青 ■#235C7B の塗りに白文字 ■#FFFFFF を合わせると約7.27:1です。操作の役割をボタン文言で示し、ボタンの位置・余白・形でも周囲と区別します。

色を見なくても操作できるか最終確認する

画面を白黒表示にしたときも、リンク、選択中の参加方法、入力が必要な欄を見つけられるか確認します。スマートフォンでは文字の折り返しや余白が変わるため、エラーメッセージが該当する欄から離れないように配置します。キーボード操作時のフォーカス表示も、周囲の色に埋もれないか確かめます。

WCAG 2.2のレベルAAには、通常の文字と背景のコントラスト比4.5:1以上、規定の大きな文字では3:1以上という基準があります。操作を認識するのに必要な輪郭や状態表示などには、隣接色との3:1以上が求められる場合があります。上の比率は指定した不透明な色同士の計算結果で、画面全体が基準に適合することを保証しません。

HueRollではHEXコードを入力し、色の濃淡や配色候補、選択色と白・黒とのコントラストを確認できます。ただし任意の2色同士の比較やAA適合の自動判定には対応していません。実際の組み合わせを別途確認し、色を区別できなくても意味と操作が伝わるページに仕上げましょう。