在許多國家，網(wǎng)絡(luò)可訪問性是一項人權(quán)和法律，可能會因違規(guī)而受到嚴(yán)重罰款。自然地，這意味著文本和圖標(biāo)等必須根據(jù)Web內(nèi)容可訪問性指南（WCAG）設(shè)定的基準(zhǔn)具有最佳的顏色對比?，F(xiàn)在，那里有很多顏色的對比檢查器（Figma現(xiàn)在甚至具有一個內(nèi)置），但是即將到來的對比色（）函數(shù)無法檢查顏色對比度，它完全解決了黑色或白色（無論哪一個與您選擇的顏色最大的對比度）。

馬上，您應(yīng)該知道我們之前已經(jīng)看過此功能。然而，那時，它被稱為color-Contrast（），而不是對比色（），并且具有更令人費解的方式。它僅在2021年才在Safari Technology Preview 122中發(fā)布，而在我撰寫本文時（現(xiàn)在為220版）也是如此。

您會這??樣使用它：

按鈕 {
   - 背景色：深色藍(lán)色；
  背景色：var（ - 背景色）;
  顏色：對比色（var（ - 背景色））;
}

在這里，對比色（）已經(jīng)確定白色與黑藍(lán)色的對比比黑色更好，這就是為什么對比色（）依靠白色。確實很簡單，但確實有一些缺點，其中包括缺乏瀏覽器支持（同樣，目前僅在Safari Technology Preview中）。

但是，我們可以有條件地使用對比色（）：

 @supports（顏色：對比色（紅色））{
  / *支持的對比顏色（）支持 */
}

@supports不（顏色：對比色（紅色））{
  / *不支持的對比色（） */
}

對比色（）的缺點

首先，我只想說已經(jīng)在考慮改進，因此在這里我將解釋我聽說過的任何缺點以及任何改進。

毫無疑問，第一個缺點是對比色（）僅解決黑色或白色。如果您不想要黑色或白色，那就太糟糕了。但是，草案本身暗示了將來對解決的顏色的更多控制。

但是還有另一件事令人驚訝地容易忽略。當(dāng)對所選顏色實際上都無法使用黑色或白色時會發(fā)生什么？是的，對比色（）可能會……不提供對比色。理想情況下，我認(rèn)為我們希望對比色（）能夠解決最接近的顏色的最接近訪問變體。在此之前，對比色（）并不是真正可用的。

對比色（）的另一個缺點是，它僅接受數(shù)據(jù)類型，因此它不會與圖像或類似的內(nèi)容一起使用。但是，我確實設(shè)法用梯度使其“起作用”（基本上是兩個顏色停止/一個線性梯度的對比色（）實例）：

<button>
  <span>一個按鈕</span>
</button>

按鈕 {
  背景：線性級別（向右，紅色，藍(lán)色）；

  跨度{
    背景：線性級別（向右，對比色（紅色），對比色（藍(lán)色））;
    顏色：透明；
    背景剪輯：文字；
  }
}

這看起來如此恐怖的原因是，如前所述，對比色（）只能解決黑色或白色，因此在梯度的中間，我們本質(zhì)上在紫色上具有50％的灰色。通過對比色（）解決更廣泛的顏色，也將解決此問題。

但是字體尺寸呢？您可能已經(jīng)知道，顏色對比的標(biāo)準(zhǔn)取決于字體大小，那么它如何工作？好吧，目前還沒有，但是我認(rèn)為可以肯定地假設(shè)它在確定已解決的顏色時最終會考慮到字體大小。這將我們帶到了APCA。

APCA（可訪問的感知對比算法）是一種可靠測量顏色對比度的新算法。 APCA的創(chuàng)建者安德魯·薩默斯（Andrew Somers）進行了研究（以及許多其他獨立研究），并得知23％的WCAG 2“失敗”實際上是可以訪問的。此外，瘋狂的47％的“通行證”是無法訪問的。

APCA不僅應(yīng)該做得更好，而且APCA可讀性標(biāo)準(zhǔn)（ARC）要考慮到更大的字體尺寸和權(quán)重（對我來說，因為我是標(biāo)準(zhǔn)字體重量的600個）。雖然該標(biāo)準(zhǔn)預(yù)計會復(fù)雜且不必要地令人困惑，但APCA對比度計算器目前可以在視覺上的視覺上工作。

對比色（）不使用APCA，但是該草案將來暗示了將來提供更多算法。該措辭很奇怪，因為它表明我們能夠在APCA和WCAG算法之間進行選擇。再說一次，我們必須記住，某些國家的法律將需要WCAG 2的合規(guī)性，而其他國家則需要WCAG 3合規(guī)性（當(dāng)它成為標(biāo)準(zhǔn)時）。

沒錯，我們距離APCA成為WCAG 3的一部分還有很長的路要走，更不用說對比色（）了。實際上，它最初甚至不是它的一部分（或根本沒有），此后還有更多的障礙，但希望這對整個事情有所了解。目前，對比色（）僅使用WCAG 2。

使用對比色（）

這是一個簡單的示例（來自前面的相同示例），其中一個深色藍(lán)色按鈕，其中包含controft-color（）選擇的彩色文本。我將這種深色藍(lán)色顏色放入CSS變量中，以便我們可以定義一次，但要盡可能多地將其引用（目前僅兩次）。

按鈕 {
   - 背景色：深色藍(lán)色；
  背景色：var（ - 背景色）;
  / *解決白色 */
  顏色：對比色（var（ - 背景色））;
}

還有同樣的事情，但帶有燈光：

按鈕 {
   - 背景色：燈光；
  背景色：var（ - 背景色）;
  / *解決黑色 */
  顏色：對比色（var（ - 背景色））;
}

首先，我們可以絕對可以切換并在背景色屬性上使用對比色（） ，實際上，就像在邊界上一樣）：

按鈕 {
   - 色：darkblue;
  顏色：var（ - 顏色）;
  / *解決白色 */
  背景色：對比色（var（ -  color））;
}

任何有效將工作（命名為Hex，RGB，HSL，HWB等）：

按鈕 {
  / * HSL這次 */
   - 背景色：HSL（0 0％0％）;
  背景色：var（ - 背景色）;
  / *解決白色 */
  顏色：對比色（var（ - 背景色））;
}

是否需要隨時更改基本顏色（例如，懸停）？簡單的：

按鈕 {
   - 背景色：HSL（0 0％0％）;
  背景色：var（ - 背景色）;
  / *從白色開始，懸停在黑色 */
  顏色：對比色（var（ - 背景色））;

  ＆：懸停{
    / *輕度50％ */
     - 背景色：HSL（0 0％50％）;
  }
}

同樣，我們可以將對比色（）與Light-Dark（）函數(shù)一起使用，以確?？绻夂蜕钌Ｊ降目稍L問顏色對比：

 ：根 {
  / *如果檢查了黑暗模式 */
  ＆：has（輸入[type =“復(fù)選框”]：檢查）{
    色調(diào)：黑暗；
  }

  / *如果未檢查光模式 */
  ＆：not（：has oppation（type [type =“復(fù)選框”]：檢查））{
    色調(diào)：光；
  }

  身體 {
    / *每種模式的不同背景 */
    背景：淺黑色（HSL（0 0％50％），HSL（0 0％0％））;
    / *每種模式的不同對比顏色 */
    顏色：淺黑色（對比色（HSL（0 0％50％）），對比色（HSL（HSL（0 0％0％）））;
  }
}

關(guān)于APCA的有趣之處在于，它說明了光模式與暗模式對比之間的差異，而當(dāng)前的WCAG算法通常會評估黑模式對比度不正確。許多細(xì)微差別是為什么我們不僅需要一種新的顏色對比算法，而且還需要對比色（）CSS函數(shù)來處理所有這些細(xì)微差別（字體大小，字體重量等）的原因。

這并不意味著對比色（）必須以我們的“設(shè)計”顏色為代價確?？稍L問性。取而代之的是，我們可以在首選對比度中使用對比色（）：僅更多媒體查詢：

按鈕 {
   - 背景色：HSL（270 100％50％）；
  背景色：var（ - 背景色）;
  / *幾乎是白色（wcag aa：fail） */
  顏色：HSL（270 100％90％）；

  @Media（fefers-contrast：更多）{
    / *解決白色（wcag aa：pass） */
    顏色：對比色（var（ - 背景色））;
  }
}

就我個人而言，我不喜歡對抗性對比：更多是一種進步的增強。出色的對比度使每個人都受益，此外，我們不能確定那些需要更多對比度的人實際上是為此建立的。也許他們正在使用全新的計算機，或者他們只是不知道如何自定義可訪問性設(shè)置。

結(jié)束思想

因此，對比色（）顯然在其當(dāng)前形式中沒有用，因為它僅解決黑色或白色，這可能無法訪問。但是，如果將其改進到更廣泛的顏色上，那就太棒了。更好的是，如果將顏色升級到某個標(biāo)準(zhǔn)（例如，WCAG AA），如果他們還沒有相遇，但是如果他們這樣做，請讓他們成為。有點像故障安全方法？這意味著Web瀏覽器必須考慮字體大小，字體重量，元素等。

要投入另一個選項，Windows的高對比度模式也采用了一種方法。這種模式觸發(fā)Web瀏覽器使用強制色覆蓋顏色：活動媒體查詢，我們還可以用來進行進一步的自定義。但是，這種效果非常極端（即使我們可以使用強制色調(diào)的CSS屬性選擇退出，而是使用我們自己的顏色），而MacOS的功能版本也不會擴展到網(wǎng)絡(luò)。

我認(rèn)為，只要用戶設(shè)置計算機或瀏覽器時，強制顏色是一個令人難以置信的主意（瀏覽器將更具可執(zhí)行性），并且對比度有更大的對比選項。然后，如果您作為設(shè)計師或開發(fā)人員不喜歡強制性的顏色，那么您可以選擇達(dá)到可訪問性標(biāo)準(zhǔn)，以免執(zhí)行它們。我認(rèn)為，這種方法是最友好型和最開發(fā)人員友好的方法（假設(shè)您關(guān)心可訪問性）。為了完全靈活性，可能有一個CSS屬性可以選擇出去。默認(rèn)情況下，只需顏色對比，但是只要可以訪問它們，就可以保留選擇的顏色。

你怎么認(rèn)為？對比色（）是正確的方法，還是用戶代理應(yīng)承擔(dān)某些或全部責(zé)任？或者，也許您很樂意手動考慮顏色對比？

以上是探索CSS對比色（）函數(shù)…第二次的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！