靈感的源泉來源於不斷的接受新鮮事物。
Chrome 89 新功能一覽，性能提升明顯，大量 DevTools 新特性！
文章中的新特性，掌握了對日常開發，很受益，趕緊更新瀏覽器版本吧。
談談其中提到的：新的顏色對比度算法-先進感知對比度算法(APCA)。
啓用該功能設置：選中 Settings > Experiments 下的 Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines 複選框。
能幫助開發者驗證文本是否滿足建議的對比度比率。
對比度
在構建頁面或應用程序時需要考慮對比度，這一點很重要。對比度是頁面上相鄰顯示的顏色之間的差異。
對比度差的頁面很難閱讀，並且元素也不突出。具有良好對比度的頁面，不僅看起來更好，而且對用戶更加友好和具有高可訪問性。
某些視力較差的人看不到非常明亮或非常暗的區域。所有內容往往都看起來幾乎相同，這使區分輪廓和邊緣變得很困難。
對比度比率測量文本前景和背景之間的亮度差異。如果文本的對比度較低，則這些視力較差的用戶可能會以空白屏幕的形式體驗您的網站。
爲了幫助開發者正確地獲得對比度，WCAG（Web內容可訪問性指南）建議最小（AA）對比度至少爲 4.5:1，對於大文本，則爲 3:1，或者增強（AAA）對比度爲 7:1 或 4.5:1（大文本）。
在控制檯查看
good
bad
顏色選取器可幫助你驗證文本是否滿足建議的對比度比率：
檢查拾色器的 " 對比度比率 " 部分。 一個複選標記表示該元素滿足 最低建議。 兩個複選標記表示它符合 增強的建議。
單擊 " 對比度比率 " 部分可查看詳細信息。可視選取器中的顏色選取器頂部會顯示一條線。如果當前顏色滿足建議，則行的同一側的任何內容也滿足建議。如果當前顏色不符合建議，則同一側的任何內容也不能滿足建議。
插件或網站
有很多插件或網站可以進行檢查，比如：https://contrast-ratio.com/。
感知對比度算法（APCA）
感知對比度算法（APCA）正在取代顏色選擇器中的 AA/AAA 對比度。
APCA 是在現代色覺研究的基礎上發展起來的一種新的計算對比度的方法。與 AA/AAA 相比，APCA 更依賴於上下文。對比度是根據文本的空間、顏色和上下文的空間屬性來計算的。
- 文本的空間屬性，包括字體粗細和大小
- 顏色的空間屬性，包括文本和背景之間的感知對比度
- 上下文的空間屬性，包括環境光、周圍和預期用途
APCA Math 原理
APCA is the Advanced Perceptual Contrast Algorithm。
更多請看resiurces
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
你使用過這個功能了嗎？