WCAGのコントラスト比はAdobe Colorで確認できる

お仕事の中で「WCAGのレベルAAで～～」といったお話があり、「そもそもWCAGとはなんぞ？」状態の筆者です。。横文字が並ぶとアレルギーを発症します（笑）
ともあれ、調べていくと、複雑な計算をするような難しい話でもなく、ユニバーサルデザインを意識されている方であれば通ずる分野でしたので備忘録を残します。

WCAGを調べたきっかけ

制作物のテキストカラーを数種類用意するにあたって、「WCAGのレベルAAのコントラスト比で」といったお話がありました。

本記事では、WCAGで定めたコントラスト比に合格する配色を作るにはどうしたら良いか？を綴って参ります。

WCAGとは
WCAGのコントラスト比とは
Adobe ColorでWCAGのコントラスト比に合格するか確認する

WCAGとは

まず前提として、WCAGとはWeb Content Accessibility Guidelinesの頭文字をとったもので、Webコンテンツが多くの方に公平に利用されるために定められた国際的なガイドラインです。
このガイドラインは、色覚異常の方にも配慮された内容となっています。

＜参考リンク＞
WCAG2.1解説書（和訳）：https://waic.jp/translations/WCAG21/Understanding/

なぜ、色相ではなくコントラストを要求しているのかと疑問でしたが、
色覚特性は１型（L錐体（赤）が機能しない）、２型（M錐体（緑）が機能しない）、３型（S錐体（青）が機能しない）と多種多様なため、全ての特性に色の組み合わせを規定することは不可能であると。そのため、輝度コントラストで対応していると書かれています。

余談ですが、日本人の場合、男性の20人に１人、女性の500人に１人が特性を持っているそうです。
特に男性は、１型が1.5％、2型が3.5％、３型は非常に少ないそうです。
ちょうど、色彩検定２級の勉強をしていたので、WCAGのガイドラインは興味深い内容でした。

話が逸れてしまいましたが、次いでWCAGが定めたコントラスト比とは？に続きます↓

WCAGのコントラスト比とは

WCAGでは「背景色とテキストカラーのコントラスト差が最低限どのくらいあれば良いか」といった基準が定められています。
基準はレベルA～AAAに区分された３つの定義がなされており、コントラストの言及がされているのがレベルAAとレベルAAAでした。レベルAAは最低限の基準で、レベルAAAはそれ以上の要件が求められます。
それぞれの基準は下記の通りです。

レベルAAの基準

文字サイズ	コントラスト比
通常	4.5：1
大きな文字	3：1

レベルAA

レベルAAAの基準

文字サイズ	コントラスト比
通常	7：1
大きな文字	4.5：1

レベルAAA

＜参考リンク＞
WCAG2.1解説書（和訳）｜1.4.3コントラスト（最低限）：https://waic.jp/translations/WCAG21/#contrast-minimum

コントラスト比と一概に言っても、何と何のコントラスト比？と疑問に思った方もいらっしゃるかもしれません。（兎角、私もその一人でした笑）

WCAGのいうコントラスト比とは、背景色とテキストカラーとの差であり、「明視性と可読性」を高めなさいと言いかえると腑に落ちやすいかもしれません。
一般的に可読性を上げるためには、明度差を用いますので、目視で行っていた作業が厳密に数値化されていると理解しました。

さてさて、WCAGが設けている基準の比率は分かりました。
がしかし、どうやって計算をするのでしょうか？

コントラスト比 (contrast ratio)

(L1 + 0.05) / (L2 + 0.05) ここでは、

L1 は、明るいほうの色の相対輝度である。そして、

L2 は、暗いほうの色の相対輝度である

相対輝度 (relative luminance)

最も暗い黒を 0 に、最も明るい白を 1 に正規化した色空間内の任意の点の相対的な明るさ。

注記

sRGB 色空間においては、色の相対輝度は、L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されており、R、G 及び B は以下のように定義される:

RsRGB <= 0.04045 の場合 R = RsRGB/12.92、そうでない場合 R = ((RsRGB+0.055)/1.055) ^ 2.4

GsRGB <= 0.04045 の場合 G = GsRGB/12.92、そうでない場合 G = ((GsRGB+0.055)/1.055) ^ 2.4

BsRGB <= 0.04045 の場合 B = BsRGB/12.92、そうでない場合 B = ((BsRGB+0.055)/1.055) ^ 2.4

そして、RsRGB、GsRGB、及び BsRGB は、次のように定義される:

RsRGB = R8bit/255

GsRGB = G8bit/255

BsRGB = B8bit/255

^ という記号は、指数演算子である (計算式は、[SRGB] を参考にしている)。

＜引用＞
WCAG2.1解説書（和訳）｜相対輝度：https://waic.jp/translations/WCAG21/#dfn-relative-luminance

うぅぅぅぅぅ…読む気を無くします････

Adobe ColorでWCAGのコントラスト比に合格するか確認する

計算をしなくてもAdobeが解決!!!!!有難うAdobe!!!!!!

早速、Adobe ColorでのWCAGコントラスト比の確認方法を解説します。

Adobe Color カラーパレットジェネレーター：https://color.adobe.com/ja/create/color-wheel

Adobe Colorを開くと、デフォルトがカラーホイールになっていますので「アクセシビリティツール」に切り替えます。
ついで、WCAG2.1レベルをAAかAAAに選択してください。

使用を考えているテキストカラー、その背景となる背景色を入力します。
背景が純白の場合は、#ffffffになります。

それぞれの色を入力すると、自動でコントラスト比が計算されます。（右側に表示）
さらに、画面下部のプレビューには、通常文字の場合、大きい文字の場合、アイコンの場合とケース毎に合格か不合格かが一瞬にして分かります。

不合格になった場合、Adobe Colorではコントラストの提案もしてくれます。
（コントラスト比を任意に設定して探すことも可能です。）

WCAGとは何ぞ？から入り、Adobe有難う！に行き着いたこの結末（笑）
WCAGはWebサイトやWebコンテンツ向けの基準ではあるものの、印刷物や映像にも同じ配慮が必要だよね！と調べながら感じていました。
明視性、可読性は配慮しているものの、数値化された基準があるのはひとつの指標となるので、配色提案の根拠のひとつとしても使えるのではないでしょうか。

また一つ勉強になりました！勉強の機会を与えて下さった、クライアントさまに感謝です♪