背景に合わせてテキストの色を自動で変更するプラグイン Backgroundcheck

背景の明度を自動的に判別し、要素の色を最適化してくれるスクリプト「backgroundcheck」を紹介します。

これはかなり使えそうです。例えば背景をスライドショーにしてテキストなどの要素を上に重ねる場合、その要素の色の指定に困ってしまうことがありますよね。これを使えば解決できます。公式ページの demo にくわしく実例が載っているので見てみるとわかりやすいかも。スクリプトもそちらからダウンロードすることができます。

 

backgroundcheckの使い方

使い方も非常にシンプル。jQueryのライブラリの読み込みも必要ありません。ここでは例として、p要素に適用させてみます。

/*テキストカラーを黄色に指定*/
p{
     color=yellow;
}

これで<p>タグのテキストカラーが黄色で表示されます。次からは、このテキストの色を背景の明度に合わせて変えるための手順になります。

  • まず上記の demo ページからスクリプトをダウンロードし、ページに読み込みます。
<script src="background-check.min.js"></script>
  • 次に、どの要素に効果を与えるかを指定します。ここでは<p>タグですね。
<script type="text/javascript">
     BackgroundCheck.init({
          /*ここに要素を指定*/
          targets: 'p'
     });
</script>
  • CSSに明るいときと暗いときのスタイルを追加します。
p.background--light {
     color: black;
}

p.background--dark {
     color: white;
}

これで、背景が明るいときはテキストカラーが黒、暗いときはテキストカラーが白に切り替わるようになります。たったこれだけです!簡単ですね!

まとめ

Backgroundcheckのスクリプトは自動的に背景の明るさを判別し、指定した要素にクラス名を割り振るという仕組みになっています。これを応用すればテキストカラーだけでなく、フォントサイズやフォントファミリーを切り替えるなどアイデア次第でいろいろな工夫が出来そうです。