使文字外觀適應背景亮度以實現可訪問性和美觀性

在當今的數位環境中，確保可訪問性和視覺吸引力至關重要。其中一個關鍵因素是文字與其背景之間的對比度，特別是對於弱視使用者而言。為了解決這個問題，設計人員經常採用根據背景亮度調整文字外觀的技術。

一種方法涉及使用動態更改文字顏色或交換預先定義圖像/圖示的插件或腳本。這些工具通常會計算父元素背景中被覆蓋像素的平均亮度，並相應地調整文字。例如，如果背景是深色的，文字會變成白色，或者圖示會切換到較淺的版本。

此外，這些腳本考慮父元素可能缺少定義的背景的情況，並且它們遞歸搜尋具有明確背景的最近父級。

可用資源

萬維網聯盟(W3C) 和其他行業專家提供了有關可訪問性的顏色對比度的寶貴資源和建議：

• W3C - 確保前景和背景顏色組合提供足夠的對比
• 計算顏色的感知亮度

實際實現

W3C演算法提供了一種簡單的計算方法基於RGB 顏色值的前景和背景對比。顏色的亮度由以下公式決定：

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

其中R、G 和B 代表紅色，分別是顏色的綠色和藍色分量。

範例實作

下面的JavaScript程式碼示範了W3C演算法根據背景亮度調整文字色彩的實作：

const rgb = [255, 0, 0];

// Randomly update colors for demonstration
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update RGB values
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

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

  // Set text and background colors based on brightness
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';
  $('#bg').css('color', textColour);
  $('#bg').css('background-color', backgroundColour);
}

結論

透過利用外掛程式、腳本和業界最佳實踐，設計人員可以根據背景亮度自動調整文字色彩和圖示外觀。這種方法增強了可訪問性，提高了視覺吸引力，並符合網頁內容可訪問性指南 (WCAG)。