WCAG 1.4.1: 色だけで状態や指示を伝えていないか確認する
情報、指示、状態、操作結果を色だけで伝えず、テキスト、アイコン、下線、太字、模様など色以外の手がかりも併用します。
意図的な失敗例: 色だけで必須項目を示している
赤いラベルだけが必須の手がかりです。
お名前
赤い項目は必須です。
確認観点
- リンク、必須項目、エラー、選択中の状態、グラフやチャートなど、色で意味を伝えている箇所を探す
- 色だけでなく、テキスト、記号、アイコン、下線、太字、枠線、パターンなど別の手段を併用する
- フォームでは「赤い枠の項目」ではなく、具体的なエラーメッセージや必須ラベルで状態を示す
- 本文中のリンクは文字色だけでなく、下線や十分な明暗差、ホバー/フォーカス時の変化で識別できるようにする
人の判断が必要な例
- グレースケール表示でもリンク、エラー、必須、選択中などの状態が判別できるか確認する
- ダークモードや高コントラストモードで、色に込めた意味が失われていないか確認する
- 色覚シミュレーションやブラウザの開発者ツールを使い、重要情報が色の違いだけに依存しすぎていないか確認する
補助ツール候補
- grayscale
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。