有趣的资源：

• W3C -确保前景色和背景色组合提供足够的对比度
• Calculating the Perceived Brightness of a Color

下面是W3C算法（使用JSFiddle demo too）：
第一个

这篇关于Calculating Color Contrast的24种方法的文章可能会让你感兴趣。忽略第一组函数，因为它们是错误的，但是YIQ公式将帮助你确定是否使用亮或暗的前景色。
一旦获得了元素（或祖先元素）的背景色，就可以使用本文中的函数来确定合适的前景色：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substring(1,3),16);
    var g = parseInt(hexcolor.substring(3,5),16);
    var b = parseInt(hexcolor.substring(5,7),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

mix-blend-mode就可以做到这一点：
第一个
增加（2018年3月）：下面是一个很好的教程，解释了所有不同类型的模式/实现：https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

有趣的问题。我的第一个想法是将背景的颜色反转为文本的颜色。这涉及到简单地解析背景并反转其RGB值。
大概是这样的：http://jsfiddle.net/2VTnZ/2/

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');

我发现BackgroundCheck脚本非常有用。
它会侦测背景的整体亮度（无论是背景影像或颜色），并根据背景的亮度，将类别套用至指定的文字元素（background--light或background--dark）。
它可以应用于静止和移动元素。
（Source）

如果您正在使用ES6，将十六进制转换为RGB，则可以使用以下命令：

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
        ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast(hexToRgb(#ffffff))

通过结合这些答案[ @alex-ball，@jeremyharris ]，我发现这是对我来说最好的方法：
第一个

下面是我的尝试：

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        var parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalize to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

然后使用它：

var t = $('#my-el');
t.contrastingText();

这将直接使文本根据需要变成黑色或白色。

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

然后每个图标看起来就像'save' + iconSuffix + '.jpg'。
请注意，当任何容器溢出其父容器时（例如，如果CSS高度为0，并且溢出没有隐藏），这将不起作用。

在es6中，HEX 6字符颜色字符串（#123456）的对比度可通过以下一行程序计算：

const contrastColor = c=>["black","white"][~~([1,3,5].map(p=>parseInt(c.substr(p,2),16)).reduce((r,v,i)=>[.299,.587,.114][i]*v+r,0)<128)];

下面是分解的、可读的版本：
第一个