背景の明るさに基づいてテキストの色を動的に調整するにはどうすればよいですか?

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

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

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

• 明度の計算: カラー チャネル (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);
}

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

以上が背景の明るさに基づいてテキストの色を動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。