色以外の情報伝達手段の確保
色覚特性の違いや、モノクロ表示などの環境においても、情報の伝達や操作の実行が可能であることを保証するためです。色のみに依存した情報提供は、色覚特性の違いや環境によって情報が伝わらない可能性もあるため、色以外の手段でも情報を伝える必要があります。
該当するケース
Section titled “該当するケース”- フォームの必須項目を赤色のみで示している場合
- エラーメッセージを赤色のみで表示している場合
- グラフやチャートで色のみで情報を区別している場合
- リンクテキストを色のみで示している場合
- ステータスや状態を色のみで示している場合（例：緑=成功、赤=失敗）
関連するWCAG達成基準
Section titled “関連するWCAG達成基準”チェックリスト
Section titled “チェックリスト”- 色のみで情報を伝えていないこと
- 色で示された情報が、テキストやアイコン、パターン、形状などの他の手段でも伝えられていること
- グラフやチャートで色を使用する場合、凡例やラベルで情報が補完されていること
- フォームの必須項目が、色以外の手段（例：アスタリスク、テキスト）でも示されていること
- エラーメッセージが、色以外の手段（例：アイコン、テキスト）でも示されていること
- リンクテキストが、下線やアイコンなど色以外の手段でも識別できること
- 色の違いをモノクロで表示したときに、情報が区別できるか確認しましょう
- 色覚シミュレーションツールを使用して、色覚特性の違いによる影響を確認しましょう
- 情報の重要度や優先度を考慮し、適切な補完手段を選択しましょう
- デザインの一貫性を保ちながら、色以外の手段を組み合わせましょう
チェック方法
Section titled “チェック方法”- ブラウザの開発者ツールを使用して、色を無効化した状態で確認する
- モノクロ表示のシミュレーションツールを使用する
- 色覚シミュレーションテストツールを使用する
- スクリーンリーダーを使用して、色以外の情報が適切に伝わるか確認する
- コードレビューで、色のみに依存した実装がないか確認する
補足・注意点
Section titled “補足・注意点”- 色の使用自体を禁止するものではなく、色に依存しない情報提供を推奨しています
- 色のコントラスト比に関する要件は、達成基準1.4.3コントラスト（最低限）で規定されています
- 色以外の手段を追加する際は、視覚的なノイズにならないよう注意しましょう
- 色覚特性の違いは多様であり、特定の色の組み合わせを避けることが望ましいです