背景の明るさに応じてテキストの色を自動的に切り替える方法【JavaScript／jQuery】

はじめに

Webデザインでは、背景色が明るいときには黒い文字、暗いときには白い文字を表示することで、常に読みやすいテキストを保ちたいケースがよくあります。

この記事では、要素の背景色から平均輝度を計算し、その結果に応じてテキストの色を自動的に切り替える方法を、jQueryを使ったサンプルコードとともに解説します。

輝度の計算方法（YIQ方式）

RGB値から輝度を求めるには、「YIQ方式」と呼ばれる計算式を使うのが一般的です。これは、人間の目の色ごとの感度の違いに基づいて、各チャンネルに重みを掛けて輝度を算出するものです。

輝度 = (R × 299 + G × 587 + B × 114) / 1000

計算結果が125より大きい場合は「明るい背景」と判定して黒文字を、125以下の場合は「暗い背景」と判定して白文字を適用します。

実装サンプル（JavaScript）

以下のコードでは、setInterval()によって1秒ごとにランダムな背景色を生成し、その都度テキストの色を自動的に切り替えています。

var rgb = [255, 0, 0];
setInterval(display, 1000);

function display() {
  // 0〜255のランダムなRGB値を生成
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // YIQ方式で輝度を計算
  var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +
    (parseInt(rgb[2]) * 114)) / 1000);

  // 前景色（テキスト色）の決定：明るければ黒、暗ければ白
  var f = (d > 125) ? 'black' : 'white';

  // 背景色の設定
  var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#box').css('color', f);
  $('#box').css('background-color', b);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="box">Demo</div>

CSSの設定

次に、デモ用ボックスのサイズをCSSで指定します。

#box {
  width: 300px;
  height: 300px;
}

動作のポイント

• setInterval(display, 1000)：1秒ごとに関数を繰り返し実行します。
• Math.random()：0〜255のランダムなRGB値を生成します。
• 輝度の判定：重み付きの合計を1000で割り、閾値125と比較します。
• css()メソッド：colorとbackground-colorを動的に更新します。

まとめ

この手法を使えば、ユーザーが選択した色や動的に変化する背景に対しても、常に視認性の高いテキスト色を自動的に適用できます。ダークモード対応、カラーピッカーUI、グラフやバッジの配色生成など、さまざまな場面で応用できる便利なテクニックです。