移行中の知識
文字コントラスト
Text Contrast
定義
文字コントラスト（text contrast）は、文字または文字画像と背景の相対輝度から計算するコントラスト比によって、視覚的な差を評価します。WCAG 2.2のSuccess Criterion 1.4.3（Level AA）では、通常の文字は少なくとも4.5:1、大きな文字は少なくとも3:1を求め、ロゴや付随的な文字などには例外があります。これは構成全般の「コントラスト」とは対象と判定方法が異なります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
フォームの説明テキスト
薄いグレーの補助文
見るポイント
重要度を下げるために文字色を薄くする場合でも、背景とのコントラスト比を実測する。視覚的階層を作る目的と、文字を読める条件を別々に確認する。
ヒーローバナー
写真上の見出し
見るポイント
写真の明暗が場所ごとに変わる時は、文字色だけで判断せず、オーバーレイや背景面などを含めて文字の周辺で十分なコントラストが保たれるか確認する。
注意
誤解しやすい点
- デザイン上「十分に差がある」と感じるだけで、WCAG適合をコントラスト比の計算なしに判断する。
- HSL lightnessやHSV valueの差をrelative luminanceの代わりに使う。
- 見た目に大きく感じる文字へ自動的に3:1の基準を使い、WCAGのlarge-scale textの定義を確認しない。
- ブランドカラーで書かれた文字をすべてロゴ扱いし、通常の情報テキストまで例外だと考える。
関連
関連する概念
出典