目錄感知對比度演算法(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液晶顯示...