SYNCERのロゴ
アイキャッチ画像

背景色から適した文字色が白か黒かを判定する方法

ユーザーの入力した値によって背景色を変更すると、文字色と重複して見えなくなってしまうケースがあります。背景色によって、文字色は白がいいか黒がいいかを判定するには、W3Cで公開されているアルゴリズムを利用しましょう。

サンプルコード

背景色から適した文字色が白か黒かを判定する関数です。引数、返り値、共にhex(例: #ff0000)の値です。

function blackOrWhite ( hexcolor ) {
	var r = parseInt( hexcolor.substr( 1, 2 ), 16 ) ;
	var g = parseInt( hexcolor.substr( 3, 2 ), 16 ) ;
	var b = parseInt( hexcolor.substr( 5, 2 ), 16 ) ;

	return ( ( ( (r * 299) + (g * 587) + (b * 114) ) / 1000 ) < 128 ) ? "white" : "black" ;
}

var color = blackOrWhite( "#d36015" ) ;

デモ

色を変更して結果の違いを確認してみましょう。

function blackOrWhite ( hexcolor ) {
	var r = parseInt( hexcolor.substr( 1, 2 ), 16 ) ;
	var g = parseInt( hexcolor.substr( 3, 2 ), 16 ) ;
	var b = parseInt( hexcolor.substr( 5, 2 ), 16 ) ;

	return ( ( ( (r * 299) + (g * 587) + (b * 114) ) / 1000 ) < 128 ) ? "white" : "black" ;
}

var color = blackOrWhite( "#d36015" ) ;

color =

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月9日 (水)
コンテンツを公開しました。