ijd8.COM

A simple blog for an old Ma Nong.

根据网页背景颜色调整文字颜色的算法

Permalink

背景色与前景色需要有一定的对比度,浏览时才会觉得舒适,通常有两种标准算法可以使用。

plaintext: 对比度标准
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 值:

plaintext: 取不同字体颜色
1
2
L > 0.5 // 亮背景 - 黑色字
L <= 0.5 // 暗背景 - 白色字

有时为了整数简单运算,也可以这样算:

plaintext: 整数运算
1
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

当值 >= 128 时应设字体颜色为 ,否则设为

有时候也可以在 js 脚本里动态设置:

JavaScript: 动态设置
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';
}

Write a Comment

Submit Comment Login
Based on Golang + fastHTTP + sdb | go1.16.7 Processed in 1ms