RareJob Tech Blog

レアジョブテクノロジーズのエンジニア・デザイナーによる技術ブログです

WebAIM の Contrast Checker を使いながら、コントラスト比を学ぶ

こんにちは。数ヶ月前からスキンフェードにはまっているネイティブアプリエンジニアの杉山です。
ぼかしを入れる作業の繊細さ、完成した時のグラデーションの美しさ、1週間程度で最高な状態を失ってしまう儚さ、全てが良い感じです。
今回は、「WebAIM」という Web サイトの Contrast Checker というツールを用いながら、コントラスト比の話をしたいと思います。

WebAIM とは

1999年に設立された非営利団体で、個人や組織が利用しやすいコンテンツを作成することで、障害を持つ人々への Web の可能性拡大をミッションとしています。

webaim.org

WebAIM の Contrast Checker を使ってみる

使い方は至って簡単で、Foreground Color と Background Color を入力するだけです。
これだけで、コントラスト比が適切かをチェックすることができます。
コントラス比が適切な場合は「Pass」と表示され、適切でない場合は「Fail」という表示が各項目に表示されます。
アプリなどで文字色指定や背景色指定する際に、試してみてください。

webaim.org

コントラスト比について

そもそも、コントラスト比とは 2色の輝度を使った比率のことを指します。
このコントラスト比に関しては、Web Content Accessibility Guidelines(WCAG)に Web で扱う際の適当な比率などが定義されています。

www.w3.org

コントラスト比がどのような計算式で求められているか見てみましょう。

(L1 + 0.05) / (L2 + 0.05)


L1 = 明るい色の相対輝度, L2 = 暗い色の相対輝度です。
相対輝度は、以下の式で求めることができます。

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


RGBは、以下の式で求めることができます。

RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

値を当てはめて計算する際は、下から順にやっていくことで値を算出できます。
この値が WebAIM の Contrast Checker に表示されている Contrast Ratio です。

おまけ

上記の内容だけですとネイティブアプリエンジニアが記述する意味がない為、アプリに関することを少し記述します。
コントラスト比をお手軽に確認する手段として、Android ユーザーであれば「Accessibility Scanner」というアプリを使うのも良い方法です。
Android Studio Arctic Fox 以上であれば、開発環境上で不適切なコントラスト比の確認、修正が行えます。(修正に関しては、「Fix」ボタンを押すことで提案されたテキストカラーへ変更できます。)
・Accessibility のテストは、Espresso の 「AccessibilityChecks.enable()」を使用することで可能です。