背景の明るさに基づいてテキストの色を調整する

最適な読みやすさを実現するには、多くの場合、背景とのコントラストに合わせてテキストの色を調整する必要があります。この場合、望ましい効果は、背景ピクセルの明るさレベルに基づいてテキストの色または画像を動的に切り替えることです。

コントラスト調整のアプローチ

• ]明度の計算: カラー チャネル (RGB) の加重平均を計算して、明るさのレベルを決定します。
• コントラスト比: テキストと背景の明るさを比較します。視覚的なアクセシビリティのために十分なコントラストを確保するため。

利用可能なリソース

• W3C コントラスト チェッカー: World Wide Web Consortium ( 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);
}

このアルゴリズムにより、背景の明るさに基づいて視覚的に最適なテキストの色が選択されます。