背景色与前景色需要有一定的对比度，浏览时才会觉得舒适，通常有两种标准算法可以使用。
1
2
sRGB Luma (ITU Rec. 709): L = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
W3C method (working draft): L = (red * 0.299 + green * 0.587 + blue * 0.114) / 255
符合这标准才能确保前景和背景颜色组合在有色差的人观看或在黑白情况下观看时提供足够的对比度。
通过上式计算得到 L 值：
1
2
L > 0.5 // 亮背景 - 黑色字
L <= 0.5 // 暗背景 - 白色字
有时为了整数简单运算，也可以这样算:
1((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
当值 >= 128 时应设字体颜色为 黑，否则设为 白。
有时候也可以在 js 脚本里动态设置：
1
2
3
4
5
6
7
function getContrastYIQ(hexcolor){
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';
}