新的顏色對比度演算法-感知對比度演算法APCA

ESnail發表於2021-03-14

靈感的源泉來源於不斷的接受新鮮事物。

Chrome 89 新功能一覽,效能提升明顯,大量 DevTools 新特性!

文章中的新特性,掌握了對日常開發,很受益,趕緊更新瀏覽器版本吧。

談談其中提到的:新的顏色對比度演算法-先進感知對比度演算法(APCA)。

chrome

啟用該功能設定:選中 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(大文字)。

最小對比度(AA):

AA

增強對比度(AAA):

AAA

在控制檯檢視

good

good

bad

bad

顏色選取器可幫助你驗證文字是否滿足建議的對比度比率:

檢查拾色器的 " 對比度比率 " 部分。 一個複選標記表示該元素滿足 最低建議。 兩個複選標記表示它符合 增強的建議。

單擊 " 對比度比率 " 部分可檢視詳細資訊。可視選取器中的顏色選取器頂部會顯示一條線。如果當前顏色滿足建議,則行的同一側的任何內容也滿足建議。如果當前顏色不符合建議,則同一側的任何內容也不能滿足建議。

外掛或網站

有很多外掛或網站可以進行檢查,比如:https://contrast-ratio.com/

網站

感知對比度演算法(APCA)

感知對比度演算法(APCA)正在取代顏色選擇器中的 AA/AAA 對比度。

APCA 是在現代色覺研究的基礎上發展起來的一種新的計算對比度的方法。與 AA/AAA 相比,APCA 更依賴於上下文。對比度是根據文字的空間、顏色和上下文的空間屬性來計算的。

  • 文字的空間屬性,包括字型粗細和大小
  • 顏色的空間屬性,包括文字和背景之間的感知對比度
  • 上下文的空間屬性,包括環境光、周圍和預期用途

apca

APCA Math 原理

APCA is the Advanced Perceptual Contrast Algorithm。

math

更多請看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 中的新增)

chrome && edge

edge

edge

你使用過這個功能了嗎?

相關文章