コントラストの計算方法（ウェブ アクセシビリティ 入門）
この記事では、ウェブページで使用される色のコントラストの計算方法について、解説させていただきます。
ウェブ アクセシビリティ については、こちらの過去記事も、ご参照ください。
https://and-aaa.com/report/accessibility
JIS X 8341-3:2016『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ』の達成基準の中で、ウェブページで使用される色のコントラストの達成基準は２つあります。
1.4.3 コントラスト（最低限レベル） [レベルAA]
まずは、「1.4.3 コントラスト（最低限レベル） [レベルAA]」について解説します。
この達成基準は、
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。
というものです。コントラスト比とは、画面の最も明るい部分と最も暗い部分の明るさの比率を指します。
詳しくは、
W3Cのウェブサイトの
コントラスト (最低限): 達成基準 1.4.3 を理解する
をご参照ください。W3Cの「WCAG 2.0」と「JIS X 8341-3:2016」は、同じ内容の達成基準です。
コントラスト比の計算方法
計算式
(L1 + 0.05) / (L2 + 0.05)
L1：色の明るい方の相対輝度 (0 ~ 1の値)
L2：より暗い色の相対輝度 (0 ~ 1の値)
「輝度」とは、簡単に言うと、色の明るさや強さを指す用語です。
例：白と黒
白と黒の輝度は、「白 = 1」「黒 = 0」です。
(1 + 0.05) / (0 + 0.05) = 21
白と黒のコントラスト比は「21 : 1」となります。
輝度は「HSL Color Picker」（https://hslpicker.com/）というサービスで確認できます。
例えば、左下にあるフィールドの16進数入力部分に「#ffffff」（白を意味する）と入力すると「hsla (0, 100%, 100%, 1)」と表示されます。
左から順に色相 (Hue)、彩度 (Saturation)、輝度 (Lightness/Luminance)、透明度 (alpha)という意味があり、左から３つ目の値が輝度となります。輝度が100%と表示されるのは、白の輝度が1であるということを示しています。
コントラスト比の計算方法 具体例
中小企業庁のウェブサイト（https://www.chusho.meti.go.jp/）のTOPページで、コントラストを実際に調べてみましょう。（2023年12月20日時点のウェブページの画像を使用しています。）
今回注目するのは、中小企業庁のTOPページにある「商業・地域サポート」という要素です。上記のキャプチャーで、正方形の5色の要素が並んだエリアが見えますが、その中の、オレンジ色の要素です。
Photoshopのスポイトツールを使って（Photoshop以外のツールでも調べることは可能です）、オレンジ色の部分を調べると、16進数で「#f39800」でした。白色の部分は、「#ffffff」でした。
前出の「HSL Color Picker」を使って輝度を調べると、
オレンジ色の部分：0.48
白色の部分：1
でした。コントラストの計算式
(L1 + 0.05) / (L2 + 0.05)
L1：色の明るい方の相対輝度 (0 ~ 1の値)
L2：より暗い色の相対輝度 (0 ~ 1の値)
に当てはめると、(1 + 0.05) / (0.48 + 0.05) = 1.05 / 0.53 = 約1.98 コントラスト比は、1.98：1
なので、「1.4.3 コントラスト（最低限レベル）」達成基準「少なくとも 4.5:1 のコントラスト比がある」を満たしていないことが分かります。
同じエリアにある「金融サポート」についても計算してみましょう。
黄緑色の部分は「#90c31f」で、前出の「HSL Color Picker」を使って輝度を調べると、輝度は0.44でした。
コントラストを計算すると、
(1 + 0.05) / (0.44 + 0.05) = 1.05 / 0.49 = 約2.14
なので、「1.4.3 コントラスト（最低限レベル）」達成基準「少なくとも 4.5:1 のコントラスト比がある」を満たしていないことが分かります。
1.4.6 コントラスト (高度) [レベルAAA]
達成基準「1.4.6 コントラスト (高度) [レベルAAA]」は、前出の「1.4.3 コントラスト（最低限レベル） [レベルAA]」と確認方法は同じです。達成基準がより厳しいもの（少なくとも 7:1 のコントラスト比がある）です。
詳しくは、
W3Cのウェブサイトの
をご参照ください。
「1.4.3 コントラスト（最低限レベル） [レベルAA]」を満たしていなければ、「1.4.6 コントラスト (高度) [レベルAAA]」の達成基準も満たしていないことになります。
最後まで、読んで頂いて、ありがとうございました。
アクセシビリティに関するご相談も、お待ちしております。
