1. ホーム
  2. javascript

[解決済み] 背景の明るさに応じて文字色を変える?

2022-05-18 03:59:42

質問

親のbackground-imageまたは-colorのカバーピクセルの平均輝度に応じて、テキストの色を変えたり、あらかじめ定義された画像/アイコンを切り替えるプラグインやテクニックを探しています。

背景の覆われている部分がかなり暗い場合、テキストを白にしたり、アイコンを切り替えたりします。

さらに、親要素に background-color または -image が定義されていないことにスクリプトが気づき、最も近いものを探し続けることができれば最高です (親要素からその親要素まで...)。

このアイデアについてどう思いますか、知っていますか?似たようなものがすでにあるのでしょうか。例はありますか?

どのように解決するのですか?

このための興味深いリソースです。

以下は、W3Cのアルゴリズム( JSFiddleのデモも ):

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

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

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}
#bg {
  width: 200px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>