色分けで困った！〈分類の色分け〉
「色分けをするとわかりやすくなる」と考える人は多いでしょう。
色は情報を直感的に素早く伝える力をもっています。しかし、色の選び方によっては、意図しない方向にその力が働いてしまうことがあります。
X（Twitter）でこんなポストを見つけました。
情報を色分けしてグラフィカルに表現するの、WCAG 的には色が唯一の識別の手がかりでなければOKだけど、利用者の色覚特性によっては、デザイナーの意図に反して「これとこれは関連して見えてしまう」という、ある意味ゲシュタルト崩壊が起こり得るというのを、ユーザー行動観察で目の当たりにした。
— Kaz Tsuchiya (@caztcha) November 19, 2024
たとえば、次のような色分けです。
4つの項目を色分けしていますが、色だけでなくテキストでも情報が伝わるため、ウェブアクセシビリティの試験上では問題にはなりません（WCAG 達成基準 1.4.1 色の使用）。しかし、色覚特性によっては、この色分けが別の意味をもつように見えることがあります。
オレンジと黄緑、紫と水色の区別がしにくい人にとって、2つのグループに色分けされているように見えてしまいます。
誰にとっても見分けやすい色を使う
解決策のひとつは、さまざまな色覚の人にとって見分けやすい色で色分けすることです。たとえば「カラーユニバーサルデザイン推奨配色セット」には、小さな面積でも見分けやすい高彩度のアクセントカラーが複数用意されています。
明度差や彩度差を大きくすると、色が見分けやすくなります。しかし、カテゴリーの色分けなどはトーンを揃えてカラーバリエーションを作りたいケースが多いでしょう。色数が増えるほど、色調整の難易度は上がります。
色分けの必要性を問い直す
もうひとつの解決策は、その色分けが本当に必要かを問い直すことではないでしょうか。色分けは、その意味が利用者に伝わっていなければ機能しません。むやみに色数を増やすと、思わぬ誤解が生じることもあります。
サイトや一連のデザインの中で使っている色を洗い出してみましょう。色分けで使っている色が、他の機能色とバッティングしていないでしょうか。ときには「色分けをしない」という判断も、色のもつ機能を活かすためには必要です。
関連ページ
『見えにくい、読みにくい「困った！」を解決するデザイン【改訂版】』では、2-7「色分けで困った！」（72〜81ページ）で、折れ線グラフ、円グラフ、カレンダーの色分けについて解説しています。
関連するウェブアクセシビリティのガイドライン
WCAG 達成基準 1.4.1 色の使用（レベルA）