JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block" data-background="#ff0000">I contrast my background!</div>
<div class="block" data-background="#000000">I contrast my background!</div>
<div class="block" data-background="#FDF5E6">I contrast my background!</div>
<div class="block" data-background="#ffff00">I contrast my background!</div>
<div class="block" data-background="#008000">I contrast my background!</div>
<div class="block" data-background="#FFA500">I contrast my background!</div>

CSS

.block{
  height:50px;
  width:200px;
  text-align:center;
}

JavaScript

var divs = document.getElementsByClassName("block");
for(var i = 0; i < divs.length; i++){
	 divs[i].style.backgroundColor = divs[i].getAttribute("data-background");
   divs[i].style.color = getContrastYIQ(divs[i].getAttribute("data-background"));
}

function getContrastYIQ(hexcolor){
		hexcolor = hexcolor.replace(/^#/, "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}