关于chrome-devtools:新的颜色对比度算法感知对比度算法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）:

good

bad

色彩选取器可帮忙你验证文本是否满足倡议的对比度比率：

查看拾色器的 ” 对比度比率 ” 局部。一个复选标记示意该元素满足最低倡议。两个复选标记示意它合乎加强的倡议。

单击 ” 对比度比率 ” 局部可查看详细信息。可视选取器中的色彩选取器顶部会显示一条线。如果以后色彩满足倡议，则行的同一侧的任何内容也满足倡议。如果以后色彩不合乎倡议，则同一侧的任何内容也不能满足倡议。

有很多插件或网站能够进行查看，比方：https://contrast-ratio.com/。

感知对比度算法（APCA）正在取代色彩选择器中的 AA/AAA 对比度。

APCA 是在古代色觉钻研的根底上倒退起来的一种新的计算对比度的办法。与 AA/AAA 相比，APCA 更依赖于上下文。对比度是依据文本的空间、色彩和上下文的空间属性来计算的。

文本的空间属性，包含字体粗细和大小
色彩的空间属性，包含文本和背景之间的感知对比度
上下文的空间属性，包含环境光、四周和预期用处

APCA is the Advanced Perceptual Contrast Algorithm。

更多请看 resiurces

    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

你应用过这个性能了吗？

关于chrome-devtools:新的颜色对比度算法感知对比度算法APCA

对比度

在控制台查看

插件或网站

感知对比度算法（APCA）

APCA Math 原理

js 实现的 SAPC

最初