色だけで区別されるステータス表示

ショップのアカウントページに、注文履歴が並んでいます。注文番号、日付、合計金額、そして各行の最後に小さな色の点があります。緑は配達済み、黄は配送中、赤は支払い失敗で、一覧の上の凡例がそれを説明しています。スマートフォンでも各行が1行に収まるように、デザインは行を短く保っています。言葉なら折り返してしまうところを、点ならひと目で読めます。実装も丁寧です。各点には視覚的に隠したテキストがあり、スクリーンリーダーは行の最後で「支払い失敗」と読み上げます。

赤と緑を見分けにくい色覚特性のひとつ、2型色覚の見え方で、この一覧を見てみます。緑、黄、赤は、ほとんど同じオリーブ色になります。凡例はどの色が何を意味するかを説明していますが、凡例の3つの点も同じに見えます。注文1044は支払いに失敗していて、ショップは別のカードを待っています。しかし本人には同じように見える4件の注文が並んでいるだけで、どれに対応すればよいのか、画面のどこにも示されていません。

WCAG 1.4.1（色の使用）は、情報を伝える視覚的な手段を色だけにしてはいけないとしています。注文のステータスも情報です。点どうしの違いは色だけで、大きさも、丸い形も、行の中の位置も同じです。凡例は助けになりません。行との対応を、同じ色で取るしかないためです。隠したテキストでも解決しません。1.4.1の解説書は、コードを通じて支援技術に伝わる情報があっても、この基準を満たすとは限らないとしています。求められているのは、色に代わる目に見える手段だからです。

1.4.1の解説書は、色で違いを示せる方法を一つだけ認めています。2つの色の明るさにも差があり、その間のコントラスト比が3:1以上なら、2つ目の視覚的な手がかりになるというものです。この3色は、この条件に遠く及びません。緑 #2f9e44、黄 #b7791f、赤 #e03131 の間のコントラスト比は1.06:1から1.31:1しかなく、違いはほぼ色相だけです。そして色覚特性で見分けられなくなるのが、まさにその色相です。白いページに3つのステータスの点を置く限り、この例外はどんな色の組み合わせでも満たせません。言葉を添えない点には、達成基準1.4.11（非テキストのコントラスト）により白に対して3:1が必要で、その範囲には互いに3:1離れた色を2つまでしか置けず、3つは置けないためです。

日差しの下のスマートフォンや、暗くしたノートPCの画面でも同じことが起きます。3色が互いに溶け合って見えるためです。スクリーンリーダーの利用者はここでは困りません。隠したテキストが各ステータスを伝えています。問題が起きるのは、一覧を目で見る人です。

10グループ中3グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響あり）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 色を知覚しない 赤と緑を見分けにくい色覚特性があると、緑、黄、赤の点がどれも同じオリーブ色に見えることがあります。行を見ても凡例を見ても、どの支払いが失敗したか分かりません。
• 視覚が限られる コントラストの感度が低い人には、10ピクセルの点は小さなしみにすぎません。400%に拡大すると凡例は画面の外に出るため、色を覚えておいてから照らし合わせることになります。
• 言語・認知・学習の能力が限られる 色の凡例は、覚えたうえで、行を読む間ずっと頭に置いておく必要があります。記憶や注意に困難のある人には負担です。行の中の言葉なら、何も覚える必要がありません。

マークアップに誤りはありません。各点は見えない名前が付いた空のspanで、名前を確認するスキャンは通ります。axeが色だけの区別を確認するのは文章の中のリンクだけで、一覧の点どうしを比べるルールはありません。この監査では、目に見える言葉がなく、1つの一覧や表の中で2色以上に分かれる小さな色の印を見つけられますが、その色に意味があるかどうかは人が判断する必要があるため、確認の候補として扱います。修正を頼まれたAIのコーディングツールは、点に title や aria-label を付けがちです。どちらも、誰の目にも見えないテキストが増えるだけです（titleが表示されるのは、10ピクセルの点にマウスを止めたときだけです）。色覚特性に配慮したとされる配色に替えることもあります。色相を見分けやすくなる人はいますが、色が唯一の手がかりであることは変わりません。