tande lab.

[JavaScript] 背景色によってテキスト色を変更する

背景色がダイナミックに変更になる箇所で、
その背景色によって表示するテキストの色を変更する Tips です。

以下のサイトの、gday さんの回答が参考になりました。

RGB値を引数にとった関数にしてみました。
return で 白(#FFF) または 黒(#000) を返します。

// 背景色によってテキスト色を白/黒どちらにするか判別する
// 参考式: Y=0.3R+0.6G+0.1B で Y>127なら黒、それ以外なら白
var checkTxtColor = function(cR,cG,cB){

	// 最高値は255なので、約半分の数値127を堺目にして白/黒の判別する
	var cY = 0.3*cR + 0.6*cG + 0.1*cB;
	
	if(cY > 127){
		return "#000"; // 黒に設定
	}
	return "#FFF"; // 白に設定
}

RGB値自体の取得は、
前記事 – [JavaScript] 色表記の変換が簡単なライブラリ rgbcolor.js
で紹介したライブラリを利用すると簡単です。