文字色のカラーコントラストの調整(js-contrast-color)

概要

背景色が動的に変化する場合(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>