LoginSignup
8

More than 5 years have passed since last update.

背景色にもとづいて前景色を選ぶ実装

Last updated at Posted at 2014-08-15

もしくは逆の前景色から背景色を選択するでも良いんだけれど、掲題を例にする。

  • 背景色が動的
  • 明るい前景色と暗い前景色の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 じゃないの・・・

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8