背景色から適した文字色が白か黒かを判定する方法
ユーザーの入力した値によって背景色を変更すると、文字色と重複して見えなくなってしまうケースがあります。背景色によって、文字色は白がいいか黒がいいかを判定するには、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 =
関連記事
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。
- ピンチイン・ピンチアウトでズームする方法
- タッチデバイスのピンチイン、ピンチアウトで画像を縮小、拡大します。
- スクロール中だけスタイルを適用する方法
- スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- リサイズ中だけスタイルを適用する方法
- リサイズ中だけスタイルを適用するには、classListとsetTimeout()を利用します。