#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 |
- $("#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");
- }
- });
- });