テキストカラーコントラスト

概要

背景色が動的に変化する場合（CMSでカラー設定ができるようにしたり、ランダムで色を変えるなど） 文字色によって、文字が読みにくくなる場合があります。この組み込みJSを使用すると、背景色からコントラストが高い文字色（黒系・白系）を設定できるようになります。

デモ

ラベル

ラベル

ラベル

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: #333;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: tomato;" >ラベル</span>
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" style="background-color: skyblue;" >ラベル</span>

使い方

「js-contrast-color」クラスを振った要素の背景色から、その要素の文字色を変更します。

<span class="js-contrast-color">ラベル</span>

設定について

設定は data属性で指定します。

データ属性名	詳細	デフォルト値
data-black-color	黒系の文字色のカラーをhex色で指定します	#000000
data-white-color	白系の文字色のカラーをhex色で指定します	#ffffff
data-bg-color	コントラスト計算に使用する背景色を固定で指定します。	要素の背景色

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" >ラベル</span>

---