こんにちは、kiyokawaです。
背景の色と文字の色の組み合わせが悪いと、文字が読みにくくなりますよね。
組み合わせが悪いとなぜ読みにくいのか、また読みやすい組み合わせの条件は何か気になったので調べてみました。
結論から書くと、「色差」と「明度差」が関係していました。
色差とは、様々な色を三次元空間の点としたときの二点間の距離のことです。
シンプルに色の差という解釈でいいと思います。
色差の最大は765です。
明度差とは色の明るさの差のことです。最も明るい色は白で最も暗い色は黒になります。
明度差の最大は255です。
では、読みやすいの基準は何かというと
・色差が500以上
・明度差が125以上
この二つです。差が大きいほど読みやすい組み合わせとなります。
逆に差が小さいほど似た色同士の組み合わせになって読みにくくなります。
計算式は以下のものになります。
・色差
色差 = (max(RED1,RED2) – min(RED1,RED2)) + (max(GREEN1,GREEN2) – min(GREEN1,GREEN2)) + (max(BLUE1,BLUE2) – min(BLUE1,BLUE2))
|
1 2 3 |
例) 黄色(255,255,0) 青(0,0,255)の場合 (max(255,0) - min(255,0)) + (max(255,0) - min(255,0)) + (max(0,255) - min(0,255)) = 765 基準値(500)を上回っているので見やすい組み合わせといえます。 |
・明度差
明度1 = ((RED1 * 299) + (GREEN1 * 587) + (BLUE1 * 114)) / 1000
明度2 = ((RED2 * 299) + (GREEN2 * 587) + (BLUE2 * 114)) / 1000
明度差 = abs(明度1 – 明度2)
|
1 2 3 4 5 |
例) 黄色(255,255,0) 青(0,0,255)の場合 ((255 * 299) + (255 * 587) + (0 * 114)) / 1000 = 225.93 (黄色の明度) ((0 * 299) + (0 * 587) + (255 * 114)) / 1000 = 29.07 (青色の明度) 225.93 - 29.07 = 196.86 こちらも基準値(125)を上回っているので見やすい組み合わせといえます。 |
基準値及び計算式は「Techniques For Accessibility Evaluation And Repair Tools」の中で紹介しているものを参考にさせていただきました。
Javaで書くとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
public class ColorChecker { /** * 明度を取得 */ private int getColorLightness(int color) { ColorModels cm = new ColorModels(color); return (((cm.r) * 299) + ((cm.g) * 587) + ((cm.b) * 114)) / 1000; } /** * 色差が基準値を満たしているか計算 */ public boolean isContrastDifference(int textColor, int backColor) { ColorModels textCM = new ColorModels(textColor); ColorModels backCM = new ColorModels(backColor); int contrastDiff = ((Math.max(textCM.r, backCM.r)) - (Math.min(textCM.r, backCM.r))) + ((Math.max(textCM.g, backCM.g)) - (Math.min(textCM.g, backCM.g))) + ((Math.max(textCM.b, backCM.b)) - (Math.min(textCM.b, backCM.b))); return contrastDiff >= 500; } /** * 明度差が基準値を満たしているか計算 */ public boolean isLightnessDifference(int textColor, int backColor) { int lightnessDiff = Math.abs(getColorLightness(textColor) - getColorLightness(backColor)); return lightnessDiff >= 125; } private class ColorModels { private int r; private int g; private int b; private ColorModels(int color) { setR(Color.red(color)); setG(Color.green(color)); setB(Color.blue(color)); } private void setR(int r) { this.r = r; } private void setG(int g) { this.g = g; } private void setB(int b) { this.b = b; } } } |
以上です。