背景色を自由に設定できるようにしたとき、
文字の色を白か黒に自動で判定したいなと思い、
いろいろ調べたときの備忘録。

W3Cでアルゴリズムが公開されているので、それを利用。

function getInvertedColor(hexColor:string) {

  // 指定した色からR/G/Bをそれぞれ取得
  const red = parseInt(hexColor.substr(1, 2), 16);
  const green = parseInt(hexColor.substr(3, 2), 16);
  const blue = parseInt(hexColor.substr(5, 2), 16);
  
  // 明るさの計算(0〜255)
  const brightness = ( red * 299 + green * 587 + blue * 114 ) / 1000;
  // 明るさの計算(0〜100)
  const luminance = brightness / 2.55
  
  // 基準値(50)より大きい場合は、黒を返し、それ以外は白を返す
  return luminance > 50 ? "#000000" : "#ffffff";
}