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

アダプティブ テキスト コントラストのピクセルの明るさを考慮する

Web デザインでは、テキストと背景の間の適切なコントラストを確保することがアクセシビリティにとって重要です。ただし、背景の明るさに基づいてテキストの色を動的に調整することには課題が生じる可能性があります。

プラグインまたはテクニック?

この問題に対処するためのさまざまなプラグインとテクニックがあります。 1 つのアプローチには、背景要素で覆われたピクセルの平均輝度を計算することが含まれます。明るさが低い場合、文字の色は白に切り替わります。高い場合、色は黒に設定されます。

W3C 推奨アルゴリズム

World Wide Web Consortium (W3C) は、知覚される明るさを計算するアルゴリズムを開発しました。適切なテキストのコントラストを設定するために使用できる色の。式は次のとおりです:

Brightness = ((Red * 299) + (Green * 587) + (Blue * 114)) / 1000

JSFiddle によるデモ

この JSFiddle デモは実装を示しています: https://jsfiddle.net/hva655r6

JavaScript コードは背景色をランダムに生成し、W3C アルゴリズムを使用してそれに応じてテキストの色を調整します。

親要素の背景のアドレス指定

親で定義された背景の欠如に対処するため要素を使用すると、スクリプトは定義された背景を持つ最も近い親要素を再帰的に検索できます。これにより、ネストされた要素や動的に生成された要素に対してもアクセシビリティが確保されます。

追加の考慮事項

この手法は、非常に効果的な解決策を提供しますが、次のことを考慮していないことに注意することが重要です。すべてのシナリオ。たとえば、背景画像に非常に小さいまたは詳細なパターンが含まれている場合、平均の明るさは全体のコントラストを正確に表さない可能性があります。

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