新的颜色对比度算法-感知对比度算法APCA

Chrome 89 新功能一览，性能提升明显，大量 DevTools 新特性！

good

感知对比度算法（APCA）

APCA 是在现代色觉研究的基础上发展起来的一种新的计算对比度的方法。与 AA/AAA 相比，APCA 更依赖于上下文。对比度是根据文本的空间、颜色和上下文的空间属性来计算的。

• 文本的空间属性，包括字体粗细和大小
• 颜色的空间属性，包括文本和背景之间的感知对比度
• 上下文的空间属性，包括环境光、周围和预期用途

APCA Math 原理

APCA is the Advanced Perceptual Contrast Algorithm。

js 实现的 SAPC

	const sRGBtrc = 2.218;
const Rco = 0.2126;		// sRGB Red Coefficient
const Gco = 0.7156;		// sRGB Green Coefficient
const Bco = 0.0722;		// sRGB Blue Coefficient

const scaleBoW = 161.8;	// Scaling for dark text on light (phi * 100)
const scaleWoB = 161.8;	// Scaling for light text on dark â€” same as BoW, but

const normBGExp = 0.38;		// Constants for Power Curve Exponents.
const normTXTExp = 0.43;	// One pair for normal text,and one for REVERSE
const revBGExp = 0.5;		// FUTURE: These will eventually be dynamic
const revTXTExp = 0.43;		// as a function of light adaptation and context

const blkThrs = 0.02;	// Level that triggers the soft black clamp
const blkClmp = 1.75;	// Exponent for the soft black clamp curve

function SAPCbasic(Rbg,Gbg,Bbg,Rtxt,Gtxt,Btxt) {

var	SAPC = 0.0;

// Find Y by applying coefficients and sum.

var	Ybg = Rbg*Rco + Gbg*Gco + Bbg*Bco;
var	Ytxt = Rtxt*Rco + Gtxt*Gco + Btxt*Bco;

if ( Ybg > Ytxt ) {	///// For normal polarity, black text on white

// soft clamp darkest color if near black.
Ytxt = (Ytxt > blkThrs) ? Ytxt : Ytxt + Math.abs(Ytxt - blkThrs) ** blkClmp;
SAPC = ( Ybg ** normBGExp - Ytxt ** normTXTExp ) * scaleBoW;

return (SAPC < 15 ) ? "0%" : SAPC.toPrecision(3) + "%";
} else {			///// For reverse polarity, white text on black
Ybg = (Ybg > blkThrs) ? Ybg : Ybg + Math.abs(Ybg - blkThrs) ** blkClmp;
SAPC = ( Ybg ** revBGExp - Ytxt ** revTXTExp ) * scaleWoB;

return (SAPC > -15 ) ? "0%" : SAPC.toPrecision(3) + "%";
}
}

// 其他省略，详细可看 code samples


最后

google 搜索了一下，edge 89 也支持了呢，Microsoft Edge 89 (DevTools 中的新增)

edge

posted @ 2021-03-14 12:16  ESnail  阅读(408)  评论(0编辑  收藏  举报