はじめに

テキストの読みやすさを大きく左右する要素の1つに、テキストと背景のコントラストがあります。これまで私は、何かしらのツールを用いてコントラスト比を確認することはあれど、その具体的な計算方法については理解していませんでした。

そこで、今回はWeb Content Accessibility Guidelines (WCAG) 2.2を参考に、コントラスト比の計算方法について学んだので、ご紹介します。

ウェブアクセシビリティにおけるコントラストとは

一般的に「コントラスト」という言葉には「対比」や「対照」という意味があります。中でもウェブアクセシビリティという文脈において、コントラストという言葉は、テキストとその背景のコントラスト（対比）を指すことがあります。

Many different visual impairments can substantially impact contrast sensitivity, requiring more light-dark contrast, regardless of color (hue). For people who are not able to distinguish certain shades of color (often referred to as color blindness) hue and saturation have minimal or no effect on legibility as assessed by reading performance. Further, the inability to distinguish certain shades of color does not negatively affect light-dark contrast perception.

参照: Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C

上記によると、多くの異なる視覚障害は、色（色相）に関係なく、明暗のコントラスト感度に多大な影響を与える可能性があります。特定の色の違いを区別できない人々にとって、色相や彩度は読みやすさに、ほとんどもしくはまったく影響を与えません。さらに、特定の色の違いを区別できないことは、明暗のコントラスト知覚に悪影響を与えることはありません。

上記の理由からWCAG2.2の推奨事項では、色（色相）を主要因としない方法でコントラストを算出しています。

コントラスト比の計算方法

コントラスト比の計算式はWCAG2.2に記載があります。計算式は以下の通りです。

(L{\sixptsize 1} + 0.05) / (L{\sixptsize 2} + 0.05)

ここで、 $L{\sixptsize 1}$ は明るい色の相対輝度、 $L{\sixptsize 2}$ は暗い色の相対輝度を表します。相対輝度については後述しますが、上記の式からもわかるようにコントラスト比は、明るい色と暗い色の比を表します。またコントラスト比は 1 ～ 21 の範囲に収まります（通常は 1:1 ～ 21:1 のように表記される）。

相対輝度の計算方法

上記で相対輝度という見慣れない単語が登場しました。こちらもWCAG2.2に記載があります。

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white

相対輝度は最も暗い黒を0、最も明るい白を1に正規化した、色空間内における任意の点の相対的な明るさのことです。

相対輝度（ $L$ ）の計算方法は、次のように定義されています。

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

この時、 $R$ 、 $G$ 、 $B$ は $R{\sixptsize sRGB}$ 、 $G{\sixptsize sRGB}$ 、 $B{\sixptsize sRGB}$ のそれぞれについて、次の条件で計算されます。

値が $0.04045$ 以下の場合: ${\text{値}} / {12.92}$
値が $0.04045$ より大きい場合： $((\text{値} + 0.055) / {1.055}) ^ {2.4}$

これは、次のように表すことができます。

\text{if~} R{\sixptsize sRGB} <= 0.04045 \text{~then~} R = {\cfrac{R{\sixptsize sRGB}}{12.92}} \text{~else~} R = \Bigr({\cfrac{R{\sixptsize sRGB} + 0.055}{1.055}}\Bigr) ^ {2.4}

\text{if~} G{\sixptsize sRGB} <= 0.04045 \text{~then~} G = {\cfrac{G{\sixptsize sRGB}}{12.92}} \text{~else~} G = \Bigr({\cfrac{G{\sixptsize sRGB} + 0.055}{1.055}}\Bigr) ^ {2.4}

\text{if~} B{\sixptsize sRGB} <= 0.04045 \text{~then~} B = {\cfrac{B{\sixptsize sRGB}}{12.92}} \text{~else~} B = \Bigr({\cfrac{B{\sixptsize sRGB} + 0.055}{1.055}}\Bigr) ^ {2.4}

また $R{\sixptsize sRGB}$ 、 $G{\sixptsize sRGB}$ 、 $B{\sixptsize sRGB}$ はそれぞれの色の8ビットのRGB値を0 ~ 1に正規化した値であり、次のように求められます。

R{\sixptsize sRGB} = {\cfrac{R{\sixptsize 8bit}}{255}} \\

G{\sixptsize sRGB} = {\cfrac{G{\sixptsize 8bit}}{255}} \\

B{\sixptsize sRGB} = {\cfrac{B{\sixptsize 8bit}}{255}} \\

上記を計算することにより、相対輝度（ $L$ ）を求めることができます。

白と黒のコントラスト比を計算してみる

例として#FFFFFF（白）と#000000（黒）のコントラスト比を計算してみましょう。

白の相対輝度を求める

まず白の相対輝度を求めてみましょう。白のRGB値を8bitで表現すると $(R, G, B)=(255, 255, 255)$ です。

よって、 $R{\sixptsize sRGB}$ 、 $G{\sixptsize sRGB}$ 、 $B{\sixptsize sRGB}$ は以下のようになります。

R{\sixptsize sRGB} = {\cfrac{255}{255}} = 1

G{\sixptsize sRGB} = {\cfrac{255}{255}} = 1

B{\sixptsize sRGB} = {\cfrac{255}{255}} = 1

各々の値は、 $0.04045$ より大きいため、 $R$ 、 $G$ 、 $B$ は以下となります。

R = \Bigr({\cfrac{1 + 0.055}{1.055}}\Bigr) ^ {2.4} = 1

G = \Bigr({\cfrac{1 + 0.055}{1.055}}\Bigr) ^ {2.4} = 1

B = \Bigr({\cfrac{1 + 0.055}{1.055}}\Bigr) ^ {2.4} = 1

最後に、相対輝度を計算します。

L{\sixptsize 1} = 0.2126 * 1 + 0.7152 * 1 + 0.0722 * 1 = 1

黒の相対輝度を求める

次に黒の相対輝度を求めてみましょう。黒のRGB値を8bitで表現すると $(R, G, B)=(0, 0, 0)$ です。

よって、 $R{\sixptsize sRGB}$ 、 $G{\sixptsize sRGB}$ 、 $B{\sixptsize sRGB}$ は以下のようになります。

R{\sixptsize sRGB} = {\cfrac{0}{255}} = 0

G{\sixptsize sRGB} = {\cfrac{0}{255}} = 0

B{\sixptsize sRGB} = {\cfrac{0}{255}} = 0

各々の値は、 $0.04045$ より小さいため、 $R$ 、 $G$ 、 $B$ は以下となります。

R = {\cfrac{0}{12.92}} = 0

G = {\cfrac{0}{12.92}} = 0

B = {\cfrac{0}{12.92}} = 0

最後に、相対輝度を計算します。

L{\sixptsize 2} = 0.2126 * 0 + 0.7152 * 0 + 0.0722 * 0 = 0

コントラスト比を求める

最後に、コントラスト比を求めます。

(L{\sixptsize 1} + 0.05) / (L{\sixptsize 2} + 0.05) = (1 + 0.05) / (0 + 0.05) = 21

したがって、白と黒のコントラスト比は 21:1 となります。

これはコントラスト比が最も高いケースであり、直感的にもわかりやすいですね。

テキストにおけるコントラストの達成基準

WCAG2.2では、テキストにおけるコントラストの達成基準として「コントラスト（最低限）」および「コントラスト（高度）」が存在します。

コントラスト（最低限）

達成基準 1.4.3: コントラスト(最低限)には、次の記載があります。これは、レベルAAの達成基準です。

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

上記によると、テキストおよび画像のテキストのコントラスト比は、少なくとも 4.5:1 以上である必要があります。

ただし、以下の場合は例外となります。

大きな文字
フォントサイズが18pt（24px）以上、もしくは14pt（18.5px）以上かつ太字の場合、少なくとも 3:1 以上のコントラスト比が必要となります。
付随的
非アクティブなUIコンポーネント、純粋な装飾テキスト、不可視なテキストなどの場合、コントラストの要件はありません。
ロゴタイプ
ロゴまたはブランド名の一部の場合、コントラストの要件はありません。

コントラスト（高度）

達成基準 1.4.6: コントラスト(高度)には、次の記載があります。これは、レベルAAAの達成基準です。

The visual presentation of text and images of text has a contrast ratio of at least 7:1

上記によると、テキストおよび画像のテキストのコントラスト比は、少なくとも 7:1 以上である必要があります。

ただし、以下の場合は例外となります。

大きな文字
フォントサイズが18pt（24px）以上、もしくは14pt（18.5px）以上かつ太字の場合、少なくとも 4.5:1 以上のコントラスト比が必要となります。
付随的
非アクティブなUIコンポーネント、純粋な装飾テキスト、不可視なテキストなどの場合、コントラストの要件はありません。
ロゴタイプ
ロゴまたはブランド名の一部の場合、コントラストの要件はありません。

まとめ

前述した2つの達成基準をまとめると、以下のようになります。

コンテンツの種類	最低限（レベルAA）	高度（レベルAAA）
通常のテキスト	4.5:1 以上	7:1 以上
大きなテキスト	3:1 以上	4.5:1 以上
付随的	要件なし	要件なし
ロゴタイプ	要件なし	要件なし

おわりに

今回はコントラストの計算方法について学びました。具体的な計算方法を学ぶことで、曖昧だったコントラストへの理解が少し深まった気がします。WCAGの達成基準を満たすことがすべてではないかもしれませんが、知識としては非常に重要なものだと思います。本記事の内容が、参考になれば幸いです。

参考

https://www.w3.org/TR/WCAG22/

https://amzn.asia/d/cJMizDI
https://amzn.asia/d/9ERhFUi

Discussion