ハイコントラストモードで消えるフォーカス・アイコン・選択状態

衣料品店の商品ページに、S、M、L、XLのサイズの選択肢と、セーターをお気に入りに保存するハートのボタンがあります。店舗本来の色では問題ありません。選んだサイズは白い文字の暗い四角になり、フォーカスは青い枠で、ハートは白の上の暗いアイコンです。

ここで、ロービジョンの利用者の多くがするように、Windowsで暗いコントラストテーマを有効にします。どの選択肢も黒地に白い枠線になり、選んだサイズがほかと見分けられません。Tabキーで選択肢やハートに移動しても、枠は表示されません。ハート自体も消え、ボタンがあるはずの場所は空白になります。

コントラストテーマ（CSSでは強制配色、forced colors）は、ページの色を利用者自身の配色に置き換えます。ブラウザーはプロパティごとに置き換え、この店の3つの指定はそこで失われます。

• 選んだサイズは background-color だけで示されています。テーマはすべての背景を同じ色にするため、選択肢の唯一の違いがなくなります。
• フォーカスの枠は outline: none のうえで box-shadow を使っています。強制配色では影は none になり、色を付け替えるoutlineも残っていません。
• ハートのパスは fill="#1a1a1a" です。インラインSVGは、文字色から来る色以外は元の色を保つため、黒に近いアイコンが黒い背景の上に残ります。

WCAG 1.4.11はページ本来の色で測定し、その色ではこのページは基準を満たします。しかしこの基準は、操作要素とその状態を識別できるようにするためのものです。コントラストテーマを使う人にとっては、こちらが実際に見るページです。枠線がなく塗りだけで描いた入力欄も、同じように消えます。

主な原因は、Windowsの「設定」、「アクセシビリティ」、「コントラスト テーマ」です。Windows上のChromium系ブラウザーとFirefoxはこれに従い、Firefoxはどのシステムでもページの色を上書きできます。ロービジョンではなく、明るい画面がつらいために暗いテーマを使う人もいて、同じように影響を受けます。

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

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

• 視覚が限られる 画面を読むためにコントラストテーマを使う人には、どのサイズも選ばれていないように見え、ハートのボタンはクリックできると分からない空白になります。
• 手の操作が限られる コントラストテーマを使うキーボード利用者は、フォーカスの枠が完全に見えなくなり、矢印キーでどのサイズを選んだか、Enterで何が押されるか分かりません。

自動チェックやコントラストの測定ツールは、スタイルシートが指定する色を測ります。コントラストテーマを有効にするものはないため、すべての自動チェックに合格したページでも、テーマではフォーカスの枠が消えることがあります。生成されたコンポーネントでは特に起きやすく、Tailwindの ring-* も、多くのデザインシステムのフォーカス表示も影で描かれ、outline-none と組み合わされがちです。塗りで示す選択状態は、どのデザイン案でも完成して見えます。