2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

模組討論:Color

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

求助,腳本出錯

在此模塊的控制台:

=p.create("hsl(123,45%,67%)"):toString('hex')

Lua錯誤 第394行:attempt to compare number with string

回溯:

  1. (tail call): ?
  2. 模塊:Color:394: 在函數「hsl2rgb」中
  3. 模塊:Color:428: 在函數「rgb」中
  4. 模塊:Color:651: 在函數「toString」中
  5. 控制台輸入:16: ?
  6. (tail call): ?
  7. [C]: 在函數「xpcall」中
  8. MWServer.lua:99: 在函數「handleCall」中
  9. MWServer.lua:313: 在函數「dispatch」中
  10. MWServer.lua:52: 在函數「execute」中
  11. mw_main.lua:7: 在主塊中
  12. [C]: ?

@東東君

--

頁面User:DGCK81LNN/簽名/style.css沒有內容。

DGCK81LNN新圈名:純真靈魂
用戶頁 | 討論 | 貢獻
奇怪的簽名增加了!
2020年5月31日 (日) 15:39 (CST)

已修復(大概) --東東君討論) 2020年5月31日 (日) 18:52 (CST)

亮暗色判斷改為通過計算比較與黑白色的對比度比例(contrast ratio)實現

原理

現有的實現是通過直接與HTML灰色rgb(127.5, 127.5, 127.5)的灰度值比較,然而人眼對顏色亮度的反應是非線性的。根據WCAG 2.x技術標準,判斷前後景色彩搭配是否符合觀感的判據是顏色對比度比例(contrast ratio),這裡是一個計算工具:contrastchecker

一个例子是,考虑#777的亮暗色。根据WCAG 2.x技术标准,#777, #000的对比度4.68要比#FFF, #777的4.47更高,所以#777是亮色(而非因为比HTML灰色#808080更暗就属于暗色)。然而根据下文所述的APCA标准又恰恰相反:#FFF, #999的对比度54.6要比#999, #000的49.4更高,所以#999反而又是暗色了。我不好说

實現

根據WCAG 2.x技術標準,顏色對比度比例(contrast ratio)是一個[1,21]間的比值(寫作1:1~21:1),其中兩色同色時取1,一黑一白時取21。

顏色對比度比例定義為(LY_1+0.05)/(LY_2+0.05),或取其倒數。其中LY是相對亮度,根據下式定義:——以上未簽名(註)本條留言未簽名,留言後請記得用--~~~~簽名!的留言由苛性氫討論·貢獻)於2022年3月4日 (五) 07:35 (UTC+8)添加。

For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

    if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
    if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
    if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

    RsRGB = R8bit/255
    GsRGB = G8bit/255
    BsRGB = B8bit/255

此外,此處給出了更新的WCAG 3 APCA標準,這裡是它的計算工具,不過公式較為複雜:APCA


結論

提請將亮暗色判斷改為通過在WCAG 2.x(或者3)技術標準下,計算給定顏色與黑白色的對比度比例,並比較取兩者間較小的一方實現。

易推得,即為比較給定顏色的相對亮度L值與「中性灰」的相對亮度LY_gray=sqrt(0.05*1.05)-0.05,大為亮色,小為暗色。話說這個「中性灰」計算回來是rgb(117.38, 117.38, 117.38)即#757575啊……——以上未簽名(註)本條留言未簽名,留言後請記得用--~~~~簽名!的留言由苛性氫討論·貢獻)於2022年3月4日 (五) 07:35 (UTC+8)添加。

參考

Relative luminance

Visual Contrast of Text Subgroup

苛性氫討論) 2022年3月2日 (三) 22:33 (CST)

Like 您可以在測試完成後直接修改模塊,如果沒有權限編輯,可以先去討論版申請萌娘百科:技術編輯員的身份。--東東君討論) 2022年3月3日 (四) 10:12 (CST)
由於不滿足申請條件(我其實不怎麼會用Lua,畢竟不是科班的嘛,獻醜了233),提請將原Color.isLight()由:
function Color.isLight(this)
  local rgb = this:rgb().value
  return 0.213 * rgb[1] + 0.715 * rgb[2] + 0.072 * rgb[3] > 255 / 2
end
修改為2.x標準的
--[[
  @desc Gamma校正
 
  @param {number} r_g_b
  @return {number}
]]
function adjustGamma(r_g_b)
  if r_g_b <= 0.04045 then return r_g_b / 12.92
  else return ((r_g_b + 0.055) / 1.055) ^ 2.4 end
end
 
--[[
  @desc 获得颜色的相对亮度
 
  @param {Color} this
  @return {number}
]]
function Color.getRelativeLuminance(this)
  local rgb = this:rgb().value
  return 0.2126 * adjustGamma(rgb[1] / 255) +
         0.7152 * adjustGamma(rgb[2] / 255) +
         0.0722 * adjustGamma(rgb[3] / 255)
end
 
--[[
  @desc 获得两颜色的对比度比例
 
  @param {Color} this
  @param {Color} color
  @return {number}
]]
function Color.getContrastRatio(this, color)
  local ratio = (this:getRelativeLuminance() + 0.05) / (color:getRelativeLuminance() + 0.05)
  if ratio < 1 then return 1 / ratio
  else return ratio end
end
 
--[[
  @desc 检测一个颜色是否为亮色
 
  @param {Color} this
  @return {boolean}
]]
function Color.isLight(this)
  return this:getRelativeLuminance() > (0.05 * 1.05) ^ 0.5 - 0.05
end
此外對原實現部分作出如下更正:Gamma校正閾值改為0.04045,相對亮度符號由L改為Y。
已使用在線編譯器(在有限的測試樣例中)如期運行。至於注釋和代碼風格實在無能為力確保正確,就煩請協助啦,thanks
——苛性氫討論) 2022年3月4日 (五) 07:16 (CST)
已添加代碼。--東東君討論) 2022年3月4日 (五) 18:51 (CST)

請求hsl->rgb添加h mod360

輸入的顏色h值可能不是標準的[0,360)範圍,而且模塊內rgb->hsl本身就會四捨五入出h=360。

{{ColorOps|s+0|#E34E4F}} ->

  1. E34F4F

—— Grandom 2022年6月21日 (二) 14:21 (CST)

Ping一下. @東東君Bhsd —— Grandom 2022年6月23日 (四) 20:12 (CST)

已添加,本來是昨天就已經加上的,寫完回復一提交就waf了--東東君討論) 2022年6月24日 (五) 12:29 (CST)