もしくは逆の前景色から背景色を選択するでも良いんだけれど、掲題を例にする。
- 背景色が動的
- 明るい前景色と暗い前景色の2色を予め指定
という状態で、文字が読みやすい前景色はどちらか判断する処理について書く。
やりかた
調べると色々あるみたいだけれど、今回は W3C が言及している2つの指標のうち、明度を用いたもので選んでみる。
var LIGHTER_COLOR = 'white'; // 明るい前景色
var DARKER_COLOR = 'black'; // 暗い前景色
// それぞれの明度
var LIGHTER_COLOR_BRIGHTNESS = getBrightness(LIGHTER_COLOR);
var DARKER_COLOR_BRIGHTNESS = getBrightness(DARKER_COLOR);
// 与えられた背景色から適切な前景色を選ぶ
function getFgColor(bgColor) {
var b = getBrightness(bgColor);
var deltaL = Math.abs(b - LIGHTER_COLOR_BRIGHTNESS);
var deltaD = Math.abs(b - DARKER_COLOR_BRIGHTNESS);
return (deltaL > deltaD) ? LIGHTER_COLOR : DARKER_COLOR;
}
// 明度を返す(min:0, max:255)
function getBrightness(colorString) {
var o = getRgba(colorString);
return ((o.red * 299) + (o.green * 587) + (o.blue * 114)) / 1000;
}
// これみて: http://qiita.com/k_ui/items/e6c1661158bd584a4209
function getRgba(colorString) {
var canvas = document.createElement('canvas');
canvas.width = 1; canvas.height = 1;
var c = canvas.getContext('2d');
c.fillStyle = colorString;
c.fillRect(0, 0, 1, 1);
var d = c.getImageData(0, 0, 1, 1).data;
return {
red: d[0],
green: d[1],
blue: d[2],
alpha: d[3]
};
}
背景色をいじっても、文字が見づらくなることがまず無いことが分かる。(時々怪しいのがあるけど。)
予め選んでおく前景色2色は、どの背景色から見てもどちらか一方の明度差が 125 以上になるように2色を選ぶと良いらしい。しかしソレ満たす2色って、ほぼ black / white じゃないの・・・