Đổi màu chữ dựa trên độ sáng nền (background brightness) trong HTML/JS

Để tự động đổi màu chữ (text color) tùy theo độ sáng trung bình của nền (background) phía sau, bạn tính luminance (độ sáng cảm nhận) từ giá trị RGB của nền, sau đó chọn chữ đen hoặc trắng.

Công thức Luminance (theo tiêu chuẩn WCAG/sRGB)

L = (R × 0.299) + (G × 0.587) + (B × 0.114)

• Nếu L > 128 (nền sáng) → Dùng chữ đen (#000).
• Nếu L ≤ 128 (nền tối) → Dùng chữ trắng (#fff).

Ví dụ hoàn chỉnh (Vanilla JS, không jQuery)

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 300px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font: bold 24px sans-serif;
        transition: background 0.5s, color 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="box">Demo Text</div>
    <script>
      var box = document.getElementById('box');
      
      function randomColor() {
        return [
          Math.floor(Math.random() * 256),
          Math.floor(Math.random() * 256),
          Math.floor(Math.random() * 256)
        ];
      }
      
      function getLuminance(rgb) {
        return Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
      }
      
      function update() {
        var rgb = randomColor();
        var luminance = getLuminance(rgb);
        var textColor = luminance > 128 ? 'black' : 'white';
        var bgColor = 'rgb(' + rgb.join(',') + ')';
        
        box.style.backgroundColor = bgColor;
        box.style.color = textColor;
        box.textContent = 'RGB: ' + rgb.join(', ') + ' | Luminance: ' + luminance + ' | Text: ' + textColor;
      }
      
      // Đổi màu mỗi giây
      setInterval(update, 1000);
      update(); // Chạy ngay lần đầu
    </script>
  </body>
</html>

Áp dụng thực tế: Text trên ảnh nền (background-image)

Nếu nền là hình ảnh, bạn không thể lấy RGB trực tiếp từ CSS. Giải pháp:

1. Vẽ ảnh lên <canvas>.
2. Dùng getImageData() lấy pixel trung bình vùng text sẽ hiển thị.
3. Tính luminance và set màu chữ.

function getAverageColor(img, x, y, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w; canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, x, y, w, h, 0, 0, w, h);
  var data = ctx.getImageData(0, 0, w, h).data;
  
  var r = 0, g = 0, b = 0, count = 0;
  for (var i = 0; i < data.length; i += 4) {
    r += data[i]; g += data[i+1]; b += data[i+2]; count++;
  }
  return [r/count, g/count, b/count];
}

Thư viện hỗ trợ

• color.js, chroma.js - Thao tác màu sắc nâng cao.
• text-contrast-checker - Kiểm tra độ tương phản WCAG AA/AAA.