文字色と背景色

NO IMAGE

こんにちは、kiyokawaです。

背景の色と文字の色の組み合わせが悪いと、文字が読みにくくなりますよね。

組み合わせが悪いとなぜ読みにくいのか、また読みやすい組み合わせの条件は何か気になったので調べてみました。

結論から書くと、「色差」と「明度差」が関係していました。

色差とは、様々な色を三次元空間の点としたときの二点間の距離のことです。
シンプルに色の差という解釈でいいと思います。
色差の最大は765です。

明度差とは色の明るさの差のことです。最も明るい色は白で最も暗い色は黒になります。
明度差の最大は255です。

では、読みやすいの基準は何かというと
・色差が500以上
・明度差が125以上
この二つです。差が大きいほど読みやすい組み合わせとなります。
逆に差が小さいほど似た色同士の組み合わせになって読みにくくなります。

計算式は以下のものになります。

・色差
色差 = (max(RED1,RED2) – min(RED1,RED2)) + (max(GREEN1,GREEN2) – min(GREEN1,GREEN2)) + (max(BLUE1,BLUE2) – min(BLUE1,BLUE2))

・明度差
明度1 = ((RED1 * 299) + (GREEN1 * 587) + (BLUE1 * 114)) / 1000
明度2 = ((RED2 * 299) + (GREEN2 * 587) + (BLUE2 * 114)) / 1000
明度差 = abs(明度1 – 明度2)

基準値及び計算式は「Techniques For Accessibility Evaluation And Repair Tools」の中で紹介しているものを参考にさせていただきました。

Javaで書くとこんな感じです。

以上です。