コニファ・ロゴ

ツール集:背景色の明暗を判別し、それにあわせて文字色を見やすく変更

jQueryを使い、背景色の明暗を判別し、その色にあわせて文字色の明暗を見やすく変更します。htmlやCSSを流用していると時として、要素の文字色と背景色の差が無く、とても見づらいケースがでてきます。要素の数が少なければ手作業でひとつひとつCSSを変更すれば良いのですが、大量になるとそうもいきません。そんなときに自動で判別してCSSを変えてくれるスクリプトが役立ちます。

次のサンプルはtable要素で、それぞれ背景色の違うtd要素にその背景色の色コード(16進数3桁表記)をテキストで表示しています。文字色は#ddddddに指定していますので、暗めの背景では見やすいのですが、明るめだと明度差が少なく見辛いものになっています。 tableの下の「文字色を調整」ボタンをクリックすると、$("td").each(function() で、すべてのtd要素を背景色の明度をチェックして中間(255/2ですが、この例では120にしています)以上の値のtd要素の文字色を#000000に変更して見やすくします。

追記:"jquery-3.2.1.min.js"を利用していますが、これを"jquery-3.4.0.min.js"にすると、うまく動作しないようです。
サンプル
#012 #123 #234 #345 #456
#567 #678 #789 #89a #9ab
#abc #bcd #cde #def #eff
#954 #f96 #b55 #e99 #76b
#bae #28c #6cf #493 #7c7

スクリプト

  1. $("#adjust").on('click',function(){
  2. $("td").each(function() {
  3. var bgc = $(this).css("background-color");
  4. var bgR = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$1");
  5. bgR = parseInt(bgR);
  6. var bgG = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$2");
  7. bgG = parseInt(bgG);
  8. var bgB = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$3");
  9. bgB = parseInt(bgB);
  10. var bgY = 0.3*bgR + 0.6*bgG + 0.1*bgB;
  11. if(bgY > 120){
  12. $(this).css("color","#000000");
  13. }
  14. });
  15. });

 

 

 

戻るボタン