您可以尝试反转颜色的十六进制值。所以#FFFFFF变成#000000，#AAAAAA变成#555555。当然，当你有#888888时，这个方法就福尔斯了，当你反转时，你会得到#777777（它们的对比度没有那么高）。
这个blog post描述了另一种方式（他们只使用黑色或白色作为前景色，这取决于背景色）。我把它翻译成JavaScript：

function idealTextColor(bgColor) {

   var nThreshold = 105;
   var components = getRGBComponents(bgColor);
   var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

   return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";   
}

function getRGBComponents(color) {       

    var r = color.substring(1, 3);
    var g = color.substring(3, 5);
    var b = color.substring(5, 7);

    return {
       R: parseInt(r, 16),
       G: parseInt(g, 16),
       B: parseInt(b, 16)
    };
}

如果你使用Typescript，你可以使用这个函数：

setFontColor(bgColor){
  let r = bgColor.substring(1, 3);
  let g = bgColor.substring(3, 5);
  let b = bgColor.substring(5, 7);

  const bgDelta = (parseInt(r, 16) * 0.299) + (parseInt(g, 16) * 0.587) + (parseInt(b, 16) * 0.114);
  return ((255 - bgDelta) < 105) ? "#000" : "#fff"; }

在HTML中（类似于Angular）：

<div class="color-bg" [style.color]="true? setFontColor(color) : '#000'">
    your text
</div>

我的结果：