適用 (対象)
視覚的な出力を行うあらゆるウェブコンテンツ技術
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.3: コントラスト (最低限) (十分な達成方法)
- 達成基準 1.4.6: コントラスト (高度) (十分な達成方法)
解説
この達成方法の目的は、利用者が背景の上にあるテキストを読めるようにすることである。達成基準 1.4.3 に関しては、この達成方法は 18pt (太字でない場合) 未満と 14pt (太字の場合) 未満のテキストのための最小コントラスト比を説明している。さらに、達成基準 1.4.6 においては、この達成方法は少なくとも 18pt (太字でない場合) 又は少なくとも 14pt (太字の場合) のテキストに対して 7:1 のコントラスト比を要求している。
この達成基準を評価する際、フォントサイズのポイント数は、ユーザエージェントから得られるか、あるいはユーザエージェントが行うフォントメトリクスによって計算されるであろう。ポイントのサイズは、CSS の pt を定義する CSS3 Values に基づく。ポイントと CSS のピクセルとの比率は 1pt = 1.333px であるため、14pt と 18pt はそれぞれおよそ 18.5px と 24px に等しい。
日本語の全角文字の場合は、拡大教科書普及推進会議 第一次報告「第2章 拡大教科書の標準的な規格について」に基づき、22 ポイント又は 18 ポイントの太字を「同等な」サイズとみなすのが妥当である。
背景が無地の色 (または真っ黒、真白) の場合、各テキストの文字が背景とのコントラスト比を 4.5:1 で保持することによってテキストの相対輝度を維持することができる。
背景または文字が相対輝度において変化する (またはパターン化されている) 場合、たとえ背景全体とのコントラスト比を 4.5:1 で保持していなくとも、文字の周囲の背景又は陰影によって、文字と背景のコントラスト比を維持することができる。
例えば、文字の上部が下部よりも明るい場合、文字と背景のコントラスト比を文字の周り全体で維持することが難しい。その場合、文字と背景のコントラスト比 4.5:1 以上を保持するため、背景を暗くするか、細い黒枠線 (少なくとも 1 ピクセル) を追加する。
コントラスト比は、背景の相対輝度がページをまたがって変化する時に、文字の相対輝度も変化させることによって維持されることもある。
例えば、ページの一端が非常に明るく、反対側の非常に暗い一端に向かってフェードする場合、ページ全体を通してコントラストの基準を満たす色は存在しない。対応する方法のひとつは、文字のその時の背景に対してコントラスト比を満たすように、文字の明るさを変化させることだろう。
背景画像又は背景色が標準的に相対輝度で十分に違いがない場合、他の方法として必要なコントラスト比を提供したテキストの周りに後光を提供する方法もある。
事例
- 黒い背景を選ぶことによって、企業ロゴに合った明るい色の文字を使うことができる。
-
テキストが大学のキャンパスの写真の上に書かれている。 幅広いさまざまな色や色合いが写真に現れているので、テキストの下のエリアが霧のような白にすることで、写真はとてもかすみ、一番暗い所は写真の上に書かれている黒いテキストとの 4.5:1 のコントラスト比を維持するのに 十分な明るさである。
参考リソースのコントラストについてのサンプル ("Color Contrst Samples") も参照のこと。
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- 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 ピクセルの部分の相対輝度の値を使用する。
-
- 同じ公式を用いて、文字のすぐ隣の背景のピクセルの相対輝度を測る。
-
次の公式を用いて、コントラスト比を算出する。
- コントラスト比が 4.5:1 以上である。
期待される結果
- #4 の結果が真である。