文字の色と、その背景色のコントラスト(色の差、明度差)が十分でないと、文字の視認性が低下してしまいます。
W3Cで公開されている計算式を利用すると適切なコントラストにする事が出来ます。
明朗度を求める計算式
結果が｢125｣以上となれば基準を満たす
((R×299)+(G×587)+(B×114))÷1000
色の差を求める計算式
結果が｢500｣以上となれば基準を満たす
(max(R1,R2)-min(R1,R2))+(max(G1,G2)-min(G1,G2))+(max(B1,B2)-min(B1,B2))
サンプル
明度差／色の差が共に不足
- 文字色：#3366ff(51:102:255)
- 背景色：#33cccc(51:204:204)
- 明度差：54
- 色の差：153
明度差／色の差が共に基準を満たしている
- 文字色：#3333ff(51:51:255)
- 背景色：#ffff00(255:255:0)
- 明度差：152
- 色の差：663
色の差が不足
- 文字色：#ff0000(255:0:0)
- 背景色：#ffff00(255:255:0)
- 明度差：150
- 色の差：255
明度差が不足
- 文字色：#ffff00(255:255:0)
- 背景色：#00ffff(0:255:255)
- 明度差：47
- 色の差：510
