適用 (対象)
あらゆるウェブコンテンツ技術
これは達成基準 1.4.3: コントラスト (最低限) (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、利用者が背景上に提示されたテキストを読めるようにすることである。この達成方法は、18 pt以上 (太字ではない場合) 又は 14 pt 以上 (太字の場合) のテキストに対しては、4.5:1 以上のコントラスト比の要件を緩和する。
この達成基準を評価する際、フォントサイズのポイント数は、ユーザエージェントから取得する、又はユーザエージェントが行う方法でフォントメトリクスによって計算されるべきである。ポイントのサイズは、CSS3 Values のCSS の pt サイズに基づいている。ポイントのサイズと CSS のピクセルとの比率は 1pt = 1.333px であるため、14pt と 18pt はそれぞれおよそ 18.5px と 24px に等しい。
背景が無地の色 (または真っ黒、真っ白) である場合、各テキストの文字と背景との間に 3:1 のコントラスト比を持たせることで、大きなサイズのテキストのコントラスト比を維持することができる。
背景又は文字が相対輝度において変化する (又はパターン化されている) 場合、たとえ背景全体とのコントラスト比を 3:1 で保持していなくとも、文字の周囲の背景は、選択又は陰影によって、文字と背景のコントラスト比を維持することができる。
コントラスト比は、背景の相対輝度がページのいたる所で変化する時に、文字の相対輝度も変化させることによって維持されることもある。
背景画像又は背景色が標準的に相対輝度で十分に違いがない場合は、他の方法として必要なコントラスト比を提供するテキストの周りに後光を提供する方法もある。
事例
-
黒い背景を選ぶことによって、企業ロゴに合った明るい色の文字を使うことができる。
大きなサイズのテキストが大学のキャンパスの写真の上に書かれている。幅広いさまざまな色や暗さが写真に現れているため、テキストの下のエリアに白いもやをかけ、写真を強くかすませることで、一番暗い所でも写真の上に書かれている黒いテキストとの 3:1 のコントラスト比を維持するのに十分な明るさとしている。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- Contrast Analyser – Application
- Contrast Ratio Analyser - online service
- Colour Contrast Analyser - Firefox Extension
- Color Contrast Samples
- Atypical colour response
- Colors On the Web Color Contrast Analyzer
- Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)
- List of color contrast tools
「Colour Contrast Analyser」は 2018 年現在、Firefox Add-ons から入手できない状態にある。
検証
手順
-
以下の公式を用いて、各文字 (すべて同一ではない限り) の相対輝度を測る:
-
色の相対輝度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されている。この場合の R, G 及び B は:
- R sRGB <= 0.03928 の場合: R = R sRGB /12.92、それ以外の場合: R = ((R sRGB +0.055)/1.055) ^ 2.4
- G sRGB <= 0.03928 の場合: G = G sRGB /12.92、それ以外の場合: G = ((G sRGB +0.055)/1.055) ^ 2.4
- B sRGB <= 0.03928 の場合: B = B sRGB /12.92、それ以外の場合: B = ((B sRGB +0.055)/1.055) ^ 2.4
注釈また、 R sRGB、 G sRGB、 及び B sRGB は以下のように定義される:
- R sRGB = R 8bit /255
- G sRGB = G 8bit /255
- B sRGB = B 8bit /255
注記"^" 記号は指数演算子である。
注記エイリアス文字では文字の端から 2 ピクセルの部分の相対輝度の値を使用する。
-
- 同じ公式を用いて、文字のすぐ隣の背景のピクセルの相対輝度を測る。
-
次の公式を用いて、コントラスト比を算出する。
- コントラスト比が 3:1 以上である。
期待される結果
- 4.の結果が真である。