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

2022-06-30 02:06:11 字數 3162 閱讀 2986

目錄感知對比度演算法(apca)

最後

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

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(大文字)。

最小對比度(aa):

增強對比度(aaa):

在控制台檢視

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

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

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

外掛程式或**

有很多外掛程式或**可以進行檢查,比如:

感知對比度演算法(apca)正在取代顏色選擇器中的 aa/aaa 對比度。

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

apca 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) else

} // 其他省略,詳細可看 code samples

前端開發,掌握一些色彩搭配是非常有必要的。好的色彩搭配,能吸引使用者的眼球。人人都喜歡美的事物。

google 搜尋了一下,edge 89 也支援了呢,microsoft edge 89 (devtools 中的新增)。

你使用過這個功能了嗎?

對比度線性拉伸

設原圖灰度值範圍 a,b 灰度拉伸指定的灰度值範圍是 c,d x為某點原來的灰度值,y為拉伸後的灰度值,則有以下關係 其中 img1 imread 1.tif figure subplot 121 imshow img1 title 原影象 para 0 100 img2 mygrayscaletr...

Emgucv emgucv實現自動對比度

主要參考 這裡面所描述的自動對比度演算法,通過c 及emgucv的方式實現。void autocontrastimage imagebyte image,ref imagebyte imageac for int i 0 i image.height i int pixelcnt image.wid...

背光和對比度調整

背光和對比度調整都可通過pwm調整,以1602為例 引腳說明 1602字元型lcd通常有14條引腳線或16條引腳線的lcd,多出來的2條線是背光電源線 vcc 15腳 和地線gnd 16腳 其控制原理與14腳的lcd完全一樣,其中 引腳符號 功能說明 vss一般接地 vdd接電源 5v v0液晶顯示...