color-yiq.html

<input type="color" />

<button>Button Text</button>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('input').oninput = (e) => {
      const color = e.target.value;

      let [r, g, b] = color.substr(1).match(/.{1,2}/g);

      let yiq = (
        (parseInt(r, 16) * 299)
        + (parseInt(g, 16) * 587)
        + (parseInt(b, 16) * 114)
      ) / 1000;

      document.querySelector('button').style.backgroundColor = color;
      document.querySelector('button').style.color = (yiq >= 150 ? '#000' : '#fff');
    };
  }, false);
</script>