背景色にあったテキスト色を選べるようにしたい。 赤に白い字は読めるが、薄黄に白い字は読めない。
背景色とテキスト色の差から文字色を変更できるようにしたい。
- 赤に白い字
赤に白
- 薄黄に白い字(読めない)
薄黄に白
解決策
2つの色の相対輝度を求めて、そのコントラスト比から判断する。
Web Content Accessibility Guidelinesのサイトによると、 コントラスト比が最低でも4.5になるようにする必要がある。
背景色と文字色(白)のコントラスト比が4.5以上の場合は文字色を白のままに、それ以外は、文字色を黒に変える。
相対輝度
相対輝度(L)の定義は以下になる。
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
そして、R、G、Bの定義は以下になる。
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if 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
コントラスト比
また、コントラスト比の定義は以下になる。
(L1 + 0.05) / (L2 + 0.05)
※ L1は明るい色の相対輝度、L2は暗い色の相対輝度