知覚可能／1.4 判別可能
1.4.11非テキストのコントラスト
レベル AANon-text Contrast
ボタンの境界やフォーム部品、フォーカスやホバーなどの状態を示すアイコンなど、操作や理解に必要な見た目の要素は、隣接する色と 3:1 以上のコントラストを確保する。非アクティブな部品や、制作者が変更していないブラウザ標準の見た目、写真など特定の外観自体が必須なグラフィックは対象外。
仕様が更新されました
- 機能追加#5064（新しいタブで開きます）1.4.11: 「境界線」が必要になる条件の解説を全面書き直し
検討中の仕様変更があります
- #5090（新しいタブで開きます）1.4.11: 十分な達成方法に C40 を追加、状況別の整理に再構成
補足
この達成基準の詳細解説は準備中です。現在は関連パターン・達成方法・原典への参照を掲載しています。
関連する達成方法
この達成基準を満たすための具体的な実装方法です。本サイトでは本文を収録していないため、各リンク先の W3C 原文を参照してください。
十分な達成方法(4)
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G195: Using an author-supplied, visible focus indicator（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G207: Ensuring that a contrast ratio of 3:1 is provided for icons（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G209: Provide sufficient contrast at the boundaries between adjoining colors（新しいタブで開きます）waic.jp（新しいタブで開きます）
原典・規範文書
- 達成基準 1.4.11 非テキストのコントラスト — WCAG 2.2 日本語訳（waic.jp）（新しいタブで開きます）規範訳。正式な要件の本文はこちら。
- Understanding Non-text Contrast — W3C（英語）（新しいタブで開きます）意図・具体例・達成方法の詳しい公式解説。