第8章　人間は、色を周りとの関係で見る

同じ赤でも、白い背景の上では暗く締まって見え、黒い背景の上では明るく浮いて見えることがあります。赤そのものは変わっていません。変わったのは周りの色です。

色は、見た目を楽しくするだけではありません。リンク、選択中、エラー、保存ボタンなどの違いを見つけやすくします。しかし、色だけへ意味を任せると、色の見え方や表示環境が変わったときに意味まで消えてしまいます。

この章では、色を単独の名前や好みで考えません。周囲との違い、画面での役割、色以外に残す手がかりを順に見ていきます。

8.1 同じ赤でも、周りが変わると違って見える

三枚の中央にある赤は、すべて同じ色、同じ大きさです。変えるのは背景だけです。

二枚目で変わったのは背景だけです。それでも赤の明るさや強さが違って感じられるなら、色を隣の色との関係で見ていることが分かります。

CSS に同じ色コードを書けば、画面に出る色の値は同じです。しかし、人が受け取る強さまで同じになるとは限りません。ボタンの色は実際のページ背景へ置き、文字色は実際に重なる面の上で確認します。

色を説明するときは、「赤だから目立つ」だけで終わらせません。背景より明るいのか暗いのか、周囲より鮮やかなのか、使う面積が大きいのかを言葉にすると、調整する場所が分かります。

一つのサイトで青を繰り返すと、利用者は青を操作や現在地の手がかりとして覚えることがあります。ただし、リンク、ボタン、選択中のタブを青だけで区別することはできません。

三つは同じ青を使っていますが、役割は異なります。リンクには下線、ボタンには面と動作名、タブには並びと現在地の線があります。色が見分けにくくても、形と置かれた場所から違いが残ります。

同じ部品の状態にも、色以外の手がかりが必要です。キーボードでボタンを選んだときは、ボタンの外側へ輪郭を加えます。

操作できないときは、色を薄くするだけでは理由が分かりません。文字まで薄くすれば、操作できない理由を読むことも難しくなります。

色は違いを見つける助けになります。何が違うのかを理解する手がかりは、形、言葉、位置にも残します。

文字と背景の明るさが近すぎると、文字の輪郭を追いにくくなります。Web アクセシビリティの指針である WCAG では、この差をコントラスト比という数値で確かめます。

次の三枚は、文字サイズ、太さ、背景を同じにし、文字の明るさだけを変えています。

コントラスト比は大切な確認です。しかし、画面全体の読みやすさを表す点数ではありません。基準を満たしていても、文字が小さすぎたり、細すぎたり、一行が長すぎたりすれば読みにくくなります。ボタンの意味やエラーの直し方が分かるかも別の問題です。

写真やグラデーションの上では、場所によって文字の後ろの色が変わります。明るい部分へ重なったときにも読めるかを確認します。文字だけでなく、入力欄の輪郭や選択中の印など、操作に必要な形と周囲の差も必要です。

次の画面は、郵便番号の入力欄を赤くしただけです。

赤を見分けられても、どこが間違いで、何を入力すればよいかまでは分かりません。「赤はエラー」というサイトの決まりを知らない人には、状態そのものも伝わらない可能性があります。

次の画面では、エラーの印と具体的な説明を加えています。

エラー文は「入力が正しくありません」だけでなく、「郵便番号は 7 桁の数字で入力してください」のように直し方を示します。色はエラーの場所を見つけやすくし、文章が内容を伝えます。

同じ考え方は、グラフやリンクにも使えます。グラフの線は色だけでなく実線と破線、点の形、線の近くにある名前で分けます。リンクには下線、選択中の項目には印や線を残します。

同じチケットを、三つの表示環境で見ます。

白と黒を入れ替えるだけでは、薄い境界が消えたり、鮮やかな色がまぶしく見えたりします。暗い背景の中でも、日付の枠、本文、ボタンが別の役割として残るように色を組み直します。

強制色表示では、利用者が選んだシステムの色へ置き換えられることがあります。背景色だけで作った区切りや、影だけで浮かせたボタンは消えるかもしれません。だから、文字、境界、部品の形を先に整え、色はそれらを助けるように使います。

色自体に、一つの意味が埋め込まれているわけでもありません。赤はエラーにも、祭りの飾りにも、値下げにも使われます。意味を決めるのは、近くにある言葉、形、置かれた場所です。

色の差は、情報を見つける助けになります。しかし、情報が増えすぎると、どの色もどの見出しも同じように目立ち始めます。

次章では、一度に見せる情報の量をどう整えれば、必要なものを見つけやすくなるかを考えます。

W3C WAI, “Understanding SC 1.4.1: Use of Color.” 色だけへ意味を依存させないための公式解説です。
W3C WAI, “Understanding SC 1.4.3: Contrast (Minimum).” 文字と背景のコントラスト比を確認できます。
W3C WAI, “Understanding SC 1.4.11: Non-text Contrast.” 入力欄や状態を示す形のコントラストについての解説です。
W3C, “CSS Color Module Level 4.” Web で扱う色の仕様です。
W3C, “CSS Color Adjustment Module Level 1.” 強制色表示など、利用者の表示設定への対応を扱います。