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"にすると、うまく動作しないようです。

スクリプト

$("#adjust").on('click',function(){
	$("td").each(function() {
		var bgc = $(this).css("background-color"); 
		var bgR = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$1");
		bgR = parseInt(bgR);
		var bgG = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$2");
		bgG = parseInt(bgG);
		var bgB = bgc.replace(/rgb\((.*),(.*),(.*)\)/gi,"$3");
		bgB = parseInt(bgB);
		var bgY = 0.3*bgR + 0.6*bgG + 0.1*bgB;
		if(bgY > 120){
			$(this).css("color","#000000");
		} 
	});
});