根據背景亮度調整文字顏色

實現最佳易讀性通常需要調整文字色彩以與背景形成對比。在這種情況下，期望的效果是根據背景像素的亮度等級動態切換文字顏色或影像。

對比調整法

• 亮度計算：計算顏色通道（RGB）的加權平均值以決定亮度等級。
• 對比：比較文字和背景的亮度以確保足夠的對比度以實現視覺可訪問性。

可用資源

• W3C 對比度檢查器： 萬維網聯盟( W3C）提供了用於計算顏色亮度並確保足夠對比度的標準化演算法。
• 計算顏色亮度：探索提供量化給定顏色亮度功能的線上資源。

W3C 對比演算法

const rgb = [255, 0, 0];

function setContrast() {
  // Calculate brightness
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                      (parseInt(rgb[1]) * 587)  
                      (parseInt(rgb[2]) * 114)) / 1000);
  // Set text color
  const textColour = (brightness > 125) ? 'black' : 'white';
  // Set background color
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';

  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

此演算法可確保根據背景亮度選擇視覺上最佳的文字顏色。