移行中の知識
非テキストコントラスト
Non-text Contrast
定義
非テキストコントラスト（non-text contrast）とは、UI componentやstateを識別するために必要なvisual information、またはcontent理解に必要なgraphical objectを、周囲から十分に見分けられるようにするアクセシビリティ上の考え方です。WCAG 2.2 Success Criterion 1.4.11（Level AA）では対象となるvisual informationに隣接色との3:1以上のcontrast ratioを求めます。文字のcontrast基準とは対象・例外が異なります。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
form UI
inputの境界
見るポイント
borderが入力欄を識別するために必要なら、背景とのcontrastを実測する。一方でlabelや背景面など別のvisual informationだけでcomponentを十分識別できる場合は、装飾borderの全pixelへ機械的に3:1を要求する問題ではないことも確認する。
dashboard
chartの意味ある線
見るポイント
axis、data line、markerなどcontent理解に必要なgraphical partが背景や隣接色から見分けられるかを見る。装飾的なillustrationやlogoへ同じ基準を無条件に適用しない。
注意
誤解しやすい点
- 画面内のすべてのborder・icon・装飾へ一律3:1を適用し、SC 1.4.11の「識別や理解に必要なvisual information」というscopeを見ない。
- HSL lightnessや見た目の明暗差だけで3:1を満たすと判断し、relative luminanceからcontrast ratioを確認しない。
- text contrastの4.5:1基準をそのままUI componentへ適用する。
- inactive componentやuser agentがappearanceを決める例外など、Success Criterionの例外範囲を確認しない。
関連
関連する概念
出典