色だけに頼らない表現 (Color Independence)

フォームのエラーが赤色だけで表示される。グラフの折れ線が色だけで区別されている。「必須項目」が赤い文字だけで示されている——これらはすべて、色覚多様性を持つユーザーに情報が届かない設計です。

よくある失敗パターンは「色は誰にでも同じように見える」という思い込みです。日本では男性の約5%（約20人に1人）が何らかの色覚特性を持ちます。赤と緑が区別しにくいP型・D型色覚では、「赤いエラー」と「緑の成功」が同じ色に見えることがあります。さらに、モノクロ印刷・プロジェクター投影・強い日差しの下でのスマートフォン——これらの状況では、色覚に関係なく色の区別が難しくなります。

色だけに頼るUIは、色覚多様性を持つユーザーを排除するだけでなく、WCAGの達成基準「1.4.1 色の使用」に違反し、アクセシビリティ法令のリスクにもなります。

1. 原則の定義

色だけに頼らない表現（Color Independence）とは、情報の伝達を色のみに依存せず、形・アイコン・テキスト・パターンなどの視覚的手段を組み合わせ（多重コード化）、色覚の違いや表示環境に関わらずすべてのユーザーに同等の情報を届ける原則。

本質は「色は補助であり、主役ではない」ということです。色は情報を素早く伝える強力な手段ですが、それだけでは届かないユーザーが必ず存在します。形・アイコン・テキストラベルを組み合わせることで、色が見えなくても情報が伝わる設計になります。

2. いつ使うか（適用場面）

特に重要になるケース

• フォームのバリデーション: エラーを赤色だけで示すのではなく、「⚠ エラー」アイコン＋エラーメッセージテキストを組み合わせる。
• グラフ・チャート: 複数の折れ線を色だけで区別するのではなく、「○」「△」「□」などのマーカー形状・破線・点線を組み合わせる。
• ステータス表示: 「赤＝危険、黄＝警告、緑＝正常」の信号機パターンは、色覚多様性では区別できない場合がある。アイコン（✕・⚠・✓）やテキストラベルを必ず添える。
• 必須項目の表示: 「赤い＊」だけでなく「（必須）」というテキストを添える。

トレードオフが起きる場面

• デザインの複雑化: アイコン＋テキスト＋色を組み合わせると、UIが視覚的に複雑になる場合がある。情報の優先度に応じて、どこまで多重コード化するかを判断する。
• スペースの制約: モバイルUIでは、アイコンとテキストを両方表示するスペースが限られる場合がある。最低限アイコンまたはテキストのいずれかを色に加える。

3. なぜ重要か（設計判断の核）

色は「情報の補助」であり、「情報そのもの」ではない。色が見えなくても、意味が伝わる設計が正しい。

設計判断の基準

• 「この情報は、グレースケール（白黒）で表示しても伝わるか？」→ 伝わらなければ、色以外の手段を追加する。
• 「色覚シミュレーターで確認したとき、情報の区別がつくか？」→ つかなければ、形・テキストを追加する。

優先順位の考え方

• 1. エラー・警告・成功のステータス（最優先）: ユーザーの行動に直結する情報。色だけでなく、必ずアイコン＋テキストで伝える。
• 2. グラフ・データの区別: 複数系列のグラフは、色だけでなくマーカー形状・線種を組み合わせる。
• 3. 装飾的な色: 純粋に装飾目的の色（背景グラデーションなど）は情報を伝えていないため、対象外。

例外条件

• 情報を伝えない純粋な装飾的要素（背景色・ブランドカラーの帯など）は対象外。「この色は何かを意味しているか？」で判断する。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

WCAGの達成基準1.4.1「色の使用」。これを満たさないと、色覚多様性を持つユーザーに情報が届きません。

エラー・警告・成功を色以外でも伝えているか: フォームのエラーに「⚠」アイコン＋エラーメッセージテキストがあるか？色だけでなく、形またはテキストで状態を伝えているか？
グラフの系列を色以外でも区別できるか: 複数系列のグラフに、マーカー形状（○△□）・線種（実線・破線・点線）・テキストラベルが付いているか？
必須項目を色以外でも示しているか: 「赤い＊」だけでなく、「（必須）」「Required」などのテキストラベルが添えられているか？

理想ライン（Better - できると強い/プロの品質）

色覚シミュレーターによる確認と、より高い多重コード化の実現。

グレースケールで確認しているか: デザインをグレースケールに変換して、すべての情報が色なしでも伝わるか確認しているか？
色覚シミュレーターで確認しているか: Figmaのアクセシビリティプラグインや「Sim Daltonism」などのツールで、P型・D型色覚でのUIを確認しているか？
テキストラベルが色に加えて常に表示されているか: アイコンだけでなく、テキストラベルも常に表示することで、アイコンの意味が不明な場合もカバーしているか？

5. UI例

同じ「フォームバリデーション」でも、色だけか多重コード化かで、色覚多様性を持つユーザーへの伝わり方は大きく変わります。

改善プロセス

1. アイコンを追加する: エラーに「⚠」、成功に「✓」、警告に「!」のアイコンを色に加える。アイコンは色が見えなくても形で状態を伝える。
2. テキストメッセージを追加する: 「エラー」「成功」「警告」の状態をテキストでも明示する。スクリーンリーダーにも読み上げられる。
3. グレースケールで確認する: デザインをグレースケールに変換して、情報が色なしでも伝わるか確認する。

6. 関連リンク

• 関連リファレンス（理論）: シグニファイア (Signifier), 二重符号化説 (Dual Coding Theory), 認知負荷 (Cognitive Load)
• 用語集（定義）: カラーユニバーサルデザイン, アクセシビリティ, WCAG, インクルーシブデザイン
• 関連するUI原則（横）: コントラストと可読性 (Contrast & Readability), 代替テキスト・ARIA (Alt Text & ARIA), 配色設計 (Color System)

7. まとめ

今日から直せる一手 担当しているサービスのフォームエラー表示を確認してください。エラーが赤色だけで示されていたら、今日中に「⚠ エラー：〇〇を入力してください」のようにアイコン＋テキストを追加してください。

チームに共有するなら一言 「色は20人に1人に届かない。アイコンとテキストを添えるだけで、すべてのユーザーに情報が届く。」