我們如何動態調整文字顏色以在不同背景下獲得最佳可見度？

不同背景亮度的動態文字色彩適應

在Web 開發領域，確保針對不同背景顏色的最佳文字可見度至關重要。此技術旨在根據其父元素背景的平均亮度更改文字的顏色或用預先定義的圖像/圖示取代它。

現有資源：

• W3C：顏色對比輔助功能： 提供計算前景和背景顏色對比的指南和演算法。
• 計算顏色亮度： 描述確定感知亮度的方法

W3C 演算法與 JSFiddle示範：

// Random color changes for demonstration
setInterval(setContrast, 1000);

function setContrast() {
  // Generate random RGB values
  rgb = [Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255)];

  // Calculate brightness using W3C formula
  brightness = Math.round(((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000);

  // Determine text color based on brightness
  textColour = (brightness > 125) ? 'black' : 'white';

  // Apply colors to a sample element
  $('#bg').css('color', textColour);
  $('#bg').css('background-color', 'rgb(' + rgb.join(',') + ')');
}

在此範例中，計算隨機變化的背景顏色的亮度，並計算動態調整文字顏色以提供最佳對比度。

如果沒有為父元素定義背景，腳本可以搜尋元素層次結構以尋找最近的具有已定義背景的元素。這可確保整個頁面的文字可見性保持一致。

以上是我們如何動態調整文字顏色以在不同背景下獲得最佳可見度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！