色覚多様性に配慮した配色の考え方｜色だけで情報を分けない設計

エラーを赤、成功を緑で示す。空きあり・空きなしを色で分ける。よく使われる表現ですが、この2色の区別がつきにくい人が一定の割合で存在します。

公益社団法人日本眼科医会の資料では、先天赤緑色覚異常の頻度は日本人男性の約5%、女性の約0.2%とされています。男性では20人に1人にあたります。BtoBのサイトで担当者が男性中心なら、閲覧者100人のうち数人には、色で分けた情報が伝わっていない可能性があります。

対応は難しくありません。色を変えるのではなく、色以外の手がかりを1つ足すだけです。この記事では、実務で問題になる箇所、手がかりの足し方、そして点検の手順を整理します。

実務で問題になりやすい箇所

1行目と2行目は問い合わせ数に直結します。エラーの箇所が分からなければ、フォームを送信できません。そのまま離脱します。

5行目も頻繁に起きます。リンクの色を本文と変えただけの場合、区別できないことがあります。下線を付けるだけで解決します。

色以外の手がかりを足す

色を使うこと自体は問題ありません。色に加えて、もう1つ手がかりを足すのが原則です。

右列はいずれも実装の手間が小さく、すべての閲覧者にとって分かりやすくなります。色覚への配慮というより、単に情報が明確になる変更です。

3行目は予約系のサイトで効果が大きい項目です。記号と文字を併記するだけで、色に依存しなくなります。

使う色を選ぶ際の考え方

• 赤と緑の組み合わせを、区別が必要な用途に使わない：最も区別しにくい組み合わせ
• 明度に差をつける：色相が近くても、明るさが違えば判別しやすい
• 色の数を減らす：区別すべき色が多いほど難しくなる
• 青と黄の系統を活用する：赤緑より判別しやすい
• 隣接させない：似た色を並べると差が分かりにくい

2つ目が最も汎用的です。色相ではなく明度で差をつければ、色の見え方にかかわらず区別できます。グラフや在庫表示では、この方法が確実です。

配色そのものの決め方はWebサイトの配色の決め方｜ブランドカラーから展開する方法で扱っています。ブランドカラーを変える必要はなく、区別が必要な用途での使い方を調整するだけで足ります。

コントラスト比との違い

この2つは別々に確認する必要があります。コントラスト比を満たしていても、赤と緑で区別している情報は伝わりません。逆に、色以外の手がかりがあっても、文字が薄ければ読めません。

コントラスト比の基準と点検方法は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方にまとめています。

自社サイトを点検する手順

1. 色で区別している箇所を洗い出す：エラー、状態、グラフ、リンク
2. 白黒で印刷する：色が消えても区別できるかを確認する
3. シミュレーションで確認する：見え方を再現するツールがある
4. 手がかりを足す：文字、記号、下線、線の種類
5. フォームを実際に操作する：エラーが分かるかを確かめる

2番目が最も簡単で確実です。白黒で印刷して区別できない情報は、色以外の手がかりが不足しています。専用のツールがなくても、この方法で大半が見つかります。

5番目は必ず実施してください。フォームは成果に直結する箇所であり、エラーが伝わらなければそこで終わります。改善の観点は入力フォームの離脱率を改善するデザインの工夫を参照してください。

どこまで対応すべきか

上から2つは費用がほとんどかからず、成果に直結します。「必須」の文字を足す、リンクに下線を付ける。この程度の変更で済みます。

対応範囲そのものの決め方はWebアクセシビリティ対応はどこまでやるべきか｜優先順位の決め方で扱っています。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

赤と緑で状態を分ける

最も区別しにくい組み合わせです。記号か文字を併記してください。

必須項目を赤い印だけで示す

必須かどうか判別できません。「必須」の文字を足すだけで解決します。

リンクを色だけで区別する

本文と見分けがつかないことがあります。下線を付けてください。

グラフを色分けだけで作る

どの系列がどれか分かりません。線の種類を変えるか、値を直接書いてください。

コントラスト比を満たしたから対応済みと考える

別の観点です。明暗の差を満たしていても、色で分けた情報は伝わりません。

よくある質問

配慮が必要な人の割合はどのくらいですか

日本眼科医会の資料では、先天赤緑色覚異常の頻度は日本人男性の約5%、女性の約0.2%とされています。男性では20人に1人にあたります。事業の対象が男性中心なら、無視できない割合です。

ブランドカラーを変える必要がありますか

ありません。変える必要があるのは、区別が必要な用途での色の使い方です。ブランドカラーは面積として使い、状態の区別には文字や記号を併用してください。

シミュレーションのツールは必要ですか

あると確実ですが、なくても白黒で印刷すれば大半が見つかります。色が消えても区別できるかを確認する方法が、最も手軽です。

アイコンだけで示すのは有効ですか

色だけよりは有効ですが、アイコン単独では意味が伝わらないことがあります。よく使われる形（チェック、バツ、感嘆符）でも解釈は分かれるため、文字と併用するのが確実です。

既存サイトを全部直す必要がありますか

ありません。フォームのエラーと必須項目、リンク、在庫や空きの表示。この4つから始めてください。いずれも変更の手間が小さく、成果への影響が大きい箇所です。

まとめ

赤と緑で状態を分ける表示は、一定の割合の人には区別できません。日本眼科医会の資料では、先天赤緑色覚異常の頻度は日本人男性の約5%、女性の約0.2%とされています。男性では20人に1人にあたるため、事業の対象によっては無視できない割合になります。

対応は色を変えることではなく、色以外の手がかりを1つ足すことです。エラーにはアイコンと文言、必須項目には「必須」の文字、在庫表示には記号、グラフには線の種類、リンクには下線。いずれも実装の手間が小さく、すべての閲覧者にとって情報が明確になる変更です。

点検で最も簡単で確実なのは、白黒で印刷することです。色が消えても区別できない情報は、手がかりが不足しています。専用のツールがなくてもこの方法で大半が見つかります。そして最優先はフォームのエラーと必須項目です。エラーの箇所が伝わらなければ送信できず、そこで離脱します。

当社ではデザイン制作において、配色と情報の伝え方の設計をご相談いただけます。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。