เปลี่ยนสีข้อความตามความสว่างของพื้นหลังที่ครอบคลุมใน HTML

สามารถเปลี่ยนสีข้อความได้โดยขึ้นอยู่กับความสว่างเฉลี่ยของพิกเซลที่ถูกครอบคลุมของสีพื้นหลังของ parent โดยใช้โค้ดสนิปเพ็ตต่อไปนี้:

var rgb = [255, 0, 0];
setInterval(display, 1000);
function display() {
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);
  var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +
    (parseInt(rgb[2]) * 114)) / 1000);
  // for foregound
  var f = (d > 125) ? 'black' : 'white';
  // for background
  var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#box').css('color', f);
  $('#box').css('background-color', b);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="box"> Demo</div>

CSS ดังนี้:

#box {
  width: 300px;
  height: 300px;
}