アクセシビリティと美観のためにテキストの外観を背景の明るさに調整する

今日のデジタル環境では、アクセシビリティと視覚的な魅力を確保することが最も重要です。これの重要な要素は、特に弱視ユーザーにとって、テキストとその背景のコントラストです。これに対処するために、デザイナーは背景の明るさに基づいてテキストの外観を調整する手法を採用することがよくあります。

1 つのアプローチには、テキストの色を動的に変更したり、事前定義された画像やアイコンを交換したりするプラグインまたはスクリプトを使用することが含まれます。これらのツールは通常、親要素の背景で覆われたピクセルの平均明るさを計算し、それに応じてテキストを調整します。たとえば、背景が暗い場合、テキストが白になるか、アイコンが明るいバージョンに切り替わります。

さらに、これらのスクリプトは、親要素に定義された背景がない場合を考慮し、再帰的に検索します。

利用可能なリソース

World Wide Web Consortium (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);
}

結論

プラグイン、スクリプト、業界のベスト プラクティスを利用することで、デザイナーは背景の明るさに基づいてテキストの色とアイコンの外観の調整を自動化できます。このアプローチにより、アクセシビリティが強化され、視覚的な魅力が向上し、Web コンテンツ アクセシビリティ ガイドライン (WCAG) に準拠します。