検索欄やスライドの矢印が背景に溶け込んでいる
入力欄の枠、アイコンだけのボタン、フォーカスの枠が、背景に近い色で描かれています。
問題
ロービジョンの利用者が、検索欄、スライドの矢印、キーボードフォーカスの位置を見つけられません。
場面 入力欄、矢印、フォーカスの枠はあるが、ほとんど見えない。 詳しく読む閉じる
オンラインストアのヘッダーに検索欄があり、トップページには前へ・次への矢印がついた商品のスライドがあります。検索欄の枠は白の上の薄いグレーの線で、プレースホルダーの文字があるだけの余白に見えます。スライドの矢印は白いアイコンで、暗い商品写真の上では見えますが、明るい写真の上では消えてしまいます。Tabキーでリンクを選択すると、フォーカスの枠は白から薄いグレーに変わるだけで、ほとんど見えません。
確認できる問題 どれも、後ろの色に近い色で描かれている。 詳しく読む閉じる
それぞれの操作要素は、テキスト以外のもので識別されています。入力欄は枠線、矢印はアイコンの形、フォーカスは枠です。そのどれもが、後ろの色に近い色で描かれています。枠線は白の上の #e0e0e0 で1.32:1、矢印は白い写真の上の #ffffff で1:1、フォーカスの枠は白の上の #c8c8c8 で1.67:1です。WCAG 1.4.11では、操作要素とその状態を識別するために必要な視覚的な情報に、3:1以上のコントラストを求めています。
利用者への影響 ロービジョンの利用者、日差しの下や暗い画面で見る人。 詳しく読む閉じる
ロービジョンの利用者は、検索欄をクリックする場所が分からず、スライドに操作要素があること自体に気付けません。キーボード利用者はフォーカスの位置を見失い、Enterキーでどのリンクが開くか分かりません。暗い画面や品質の低い画面、強い日差しの下、画面拡大を使っている場合も同じで、操作要素の薄い輪郭しか手がかりがありません。
自動チェックとAIの限界 自動チェックはテキストを確認するが、枠線、アイコン、フォーカスの状態は確認しない。 詳しく読む閉じる
多くの自動チェックは、テキストのコントラストしか確認しません。入力欄の枠線、SVGアイコンの塗り、フォーカスしたときとしていないときの変化は測定しません。画像の上のアイコンは特に難しく、結果は後ろの写真によって変わります。スライドは数秒ごとに写真が切り替わります。AIが生成したデザインも、デザイン案の背景では基準を満たし、実際の背景では満たさないことがあります。
試してみる
検索欄と矢印を探してから、Tabを押してください。
入力する場所、スライドを切り替える方法、各背景でのフォーカスの位置が分かりますか？
リネンのトート · 1/3
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
操作要素の枠、アイコン、フォーカスの枠を、隣接する色に対して3:1以上にします。
- 1入力欄の枠線または塗りは、周囲の背景に対して3:1以上にする。
- 2アイコンの操作要素は後ろの色に対して3:1以上にし、画像の上では無地の背景を敷く。
- 3フォーカスの枠はすべての背景で3:1以上にし、1色で足りない場合は縁取りを加える。
.search-input { border: 1px solid #e0e0e0; /* 白の上で1.32:1 */ background: #fff;}.carousel-arrow { color: #fff; /* 白い写真の上で1:1 */ background: transparent;}:focus-visible { outline: 2px solid #c8c8c8; /* 白の上で1.67:1 */}:root { --control-edge: #767676; /* 白の上で4.54:1 */ --focus-ring: #1a4fd0; /* 白の上で6.83:1 */}.search-input { border: 1px solid var(--control-edge);}.carousel-arrow { color: #1a1a1a; background: rgb(255 255 255 / 0.92); border-radius: 50%; box-shadow: 0 0 0 1px var(--control-edge);}:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; /* 暗い背景用の縁取り */ box-shadow: 0 0 0 8px #fff;}@media (forced-colors: active) { .carousel-arrow { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; }}この修正で直る理由
どの色も、デザインの背景の上で軽く控えめに見えるよう選ばれています。実際に隣接する色に対して3:1に届いていないため、場所を知っている人にしか操作要素が見えません。
入力欄の枠とフォーカスの枠は、白の上で3:1以上になるトークンから指定します。矢印は、ほぼ不透明な白い円の上に置くため、写真に左右されません。白の上の暗いアイコンは17.40:1です。青い枠は白の上では6.83:1ですが、#1a1a1a のバナーの上では2.55:1しかありません。白い縁取りを加えると、枠は縁取りに対して、縁取りは暗い背景に対して、それぞれ十分なコントラストになります。
実装の判断
入力欄に、四辺すべての枠線が必要とは限りません。はっきりした下線のある塗りの入力欄や、ページに対して3:1以上の塗りでも識別できます。プレースホルダーの文字は手がかりになりません。入力すると消え、文字自体も薄いことが多いためです。
無効化された操作要素と、スタイルを変更していないブラウザー標準の操作要素は、1.4.11の対象外です。クリックできる要素を「無効」として扱わないでください。実際に無効化するか、十分なコントラストにします。
デザインファイルのページの色ではなく、実際に隣接する色に対して測定します。画像の上のアイコンは、スライドに表示される最も明るい画像と最も暗い画像で確認するか、すべてのアイコンに無地の背景を敷いて、写真の影響を受けないようにします。親要素の overflow: hidden で枠が欠けることがあるため、枠と縁取りの余白を確保します。コンポーネントライブラリーが独自のテーマでこれらの色を指定している場合は、コンポーネントごとに上書きせず、テーマのトークンを変更します。
コントラストは条件の1つです。フォーカスの枠はそもそも見える必要があり（2.4.7）、WCAG 2.2のAAA基準2.4.13は、より大きくはっきりした表示を求めています。このガイドの基準を満たす枠は、どちらにも対応しやすい出発点になります。
修正の確認
マウスを使わない5つの確認
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。テーマのトークンや共通のコンポーネントのスタイルを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。色の値とトークン名は例のため、実際の配色を実際の背景で測定してください。コントラスト比は最低限の基準であり、操作要素が見つけやすいことの証明ではありません。必要とする人と一緒に、ページ全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料： www.w3.org,www.w3.org
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。