はじめに cssを書いていて、作成中のパーツがどんな色の背景に乗るのか決まらないので文字色が悩ましいなんてことありませんか？ 緑の時もあれば 黄色の時もあるんかい…… といった場合に困ってしまいますよね。 輝度(luminance)というものがある Photoshopを使っている人には馴染みがあると思いますが、明度ではなく人間の目が感じる色そのものが持っている輝きみたいなものみたいです。 上の例では黄色地に白抜きはデザインが全く機能していないので文字を黒くしたいところです。 JavaScriptで計算する まずは背景色をゲットする 目的の要素を渡して親の背景色を再帰的に辿って取得すものです function backgroundColor(el) { var color = window.getComputedStyle(el)["background-color"]; var rgba
