如何根據背景亮度動態調整文字顏色？

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

實現最佳易讀性通常需要調整文字顏色以與背景形成對比。在本例中，我們想要的效果是根據背景像素的亮度動態切換文字顏色或影像。

對比調整方法

• 亮度計算：計算顏色通道（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);
}

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

以上是如何根據背景亮度動態調整文字顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！