我發貨的第一個無障礙錯誤是白卡上的淺灰色時間戳。它在 Figma 中看起來很優雅,在我校準的顯示器上看起來很好,而且對於在停放的汽車中閱讀手機電子郵件的客戶來說,它完全看不見。他是'視障人士。那隻是陽光。那張支持票教會了我設計模型永遠無法做到的東西:對比度不是品味問題,它是一個可測量的屬性,如果你不測量它,你就是在猜測。
從那時起我就建造了 色彩對比度檢查器 在 toolz。dev 上,將對比度規則連接到 WP Adminify 的設計令牌中,並審核了比我想要計數的更多的 React 元件。本指南是我希望一開始有人交給我的體驗版本。它解釋了對比度的實際情況、數字的計算方式、對比度是多少 世界汽車協會 閾值意味著如何在不丟棄品牌調色板的情況下修復失敗的顏色對。
TL;DR: WCAG 對比度是基於兩種顏色的相對亮度的 1:1 到 21:1 的比率。對於普通正文,您至少需要 4.5:1 才能通過 AA,7:1 才能通過 AAA。大文字(約 24px,或 18.66px 粗體)對於 AA 降至 3:1,對於 AAA 降至 4.5:1。非文字 UI 類圖示和輸入邊框需要 3:1。測量每對背景文本,將 AA 視為及格欄,並在您不及格時讓工具建議及格顏色。
為什麼顏色對比如此重要?
對比度是網路上最常見的輔助功能故障。年復一年,對前百萬個主頁的自動審核發現,低對比文字是最常見的 WCAG 違規行為。它也是影響最多的人,因為它不僅涉及註冊盲人用戶。它涉及任何因年齡而視力下降的人、任何患有白內障等常見疾病的人、任何使用廉價顯示器的人、任何在明亮房間裡的人以及太陽照射到螢幕時我們每個人。
還有一個商業角度,我不會假裝不是這樣。無障礙法現在在許多地區直接引用 WCAG,這意味著無法訪問的介面是法律風險,而不僅僅是禮貌問題。但我關心的原因,以及我為此建立專用工具的原因,更簡單。人們無法閱讀的文字是無法完成唯一工作的文字。沒人能使用的華麗介面並不是設計成就。
陷阱是我們的眼睛是不可靠的敘述者。我們適應自己的螢幕,我們知道文字應該說什麼,這樣我們的大腦就會填滿它,我們會在理想的條件下查看設計。對比度消除了所有這些。它為您提供了一個不關心您的顯示器或您的期望的數字。
對比度到底是什麼?
對比度是兩種顏色的相對亮度的比較:前景色(通常是文字)和背景色。相對亮度是衡量顏色發射或反射多少光的指標,並根據人眼實際感知紅色、綠色和藍色的方式進行加權。綠色對感知亮度的貢獻最大,藍色貢獻最小,這就是為什麼黑色上的純藍色文字比純綠色更難閱讀。
WCAG 將該比率本身定義為:
(L1 + 0.05) / (L2 + 0.05)
在哪裡 L1 是淺色的相對亮度 和 L2 是較暗的。這 0.05 術語模擬從螢幕上反射的環境光,這就是為什麼比例永遠不會完全達到無限大的原因。相同的顏色產生的比例恰好為 1:1。純白上的純黑文字給出的最大值為 21:1。現實生活中的一切都在這兩個極端之間。
內化的重要一點是,該比率與 " 不一樣;兩種顏色在色調意義上看起來並不線性。兩種顏色的色調可能截然不同 - 例如飽和紅色和飽和綠色 - 並且仍然具有幾乎相同的亮度,這使得它們成為可讀性的噩夢,即使它們發生劇烈衝突。對比是關於亮度差異,而不是色差。這正是你無法關注它的原因,也是為什麼 色彩對比度檢查器 在進行任何比較之前,將兩種顏色轉換為亮度。
實際計算數字的方式如何?
如果您想了解該工具而不僅僅是信任它,這裡是完整的管道,它完全遵循 WCAG 2.2 定義。
首先,將每個顏色通道從 0 exced255 範圍歸一化為 0 exd1。然後每個通道都被線性化以撤銷 sRGB 伽瑪曲線。此公式對非常暗的值應用一個小線性段,對其餘值應用功率曲線:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
接下來,將三個線性化通道與反映人類感知的亮度係數結合:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
這些權重不是任意的。它們來自眼睛的方式'視錐細胞對不同波長的反應,這就是綠色占主導地位的原因。最後,將兩個亮度值插入上面的比率公式中,將較輕的亮度值插入頂部。
有一種微妙之處會讓人心煩意亂,那就是透明度。對比度僅在兩種不透明顏色之間才有意義,因為顏色是半透明的'真實外觀取決於背後的內容。如果您的文字顏色具有 alpha 值,則無法直接測量它。正確的方法(即工具採用的方法)是首先使用標準來源混合在背景上合成半透明前景,然後根據平坦的結果測量該比率。這與使用者實際看到的內容相匹配,而不是與您名義上設定的顏色相匹配。
我需要達到哪些 WCAG 閾值?
WCAG 在兩個一致性等級和三種廣泛的內容類型上定義了對比度要求。這裡是一處全貌。
| 內容類型 | AA 最小值 | AAA 最低值 |
|---|---|---|
| 普通文字(~24px 以下) | 4.5:1 | 7:1 |
| 大文字(~24px,或~18.66px 粗體) | 3:1 | 4.5:1 |
| 使用者介面組件和圖形 | 3:1 | 3:1(無單獨的 AAA) |
| 標誌和附帶文字 | 豁免 | 豁免 |
多次應用此表的一些註釋。 &引用;大文本&引用;是根據渲染的大小來定義的,而不是根據文字的重要性來定義的。常規重量的閾值為 18pt,粗體為 14pt,換算成大約 24px 和 18.66px。任何達到或高於 AA 的內容都可以獲得寬鬆的 3:1 bar,因為較大的字母形式在較低的對比度下仍然清晰可辨。
UI 元件規則是成功標準 1.4。11,這是團隊最常忘記的規則。它說互動式元件的視覺邊界 - 文字輸入的邊界、按鈕的輪廓、傳達意義的圖示的形狀 - 需要 3:1 與周圍環境進行比較。充滿帶有不可見輸入邊框的 AA 通標籤文字的形式仍然會失敗,而且我不只一次在製作中看到過這種情況。
最後,裝飾文字、停用控制和標誌除外。該豁免範圍很窄。灰色按鈕標籤沒問題;你稱之為"的低對比段落;次要&引用;不是。
如何使用顏色對比檢查器?
我每天使用的工作流程每對大約需要十秒。打開 色彩對比度檢查器 並在第一個欄位中輸入文字顏色。您可以貼上任何格式 - 六位數十六進位 #4b5563,一個八位數的十六進位,帶有 alpha,an rgb() 或者 rgba() 字串,an hsl() 值,或簡單的 CSS 關鍵字,例如 navy. 該工具會標準化您提供的任何內容,因此您可以在兩個欄位之間自由混合格式。
在第二個欄位中輸入您的背景顏色。當兩者都有效時,確切的比例會出現在實際背景上呈現的大型、普通和標題文字的即時樣本旁邊。預覽很重要。數字會告訴您它是否通過,但看到真實顏色上的真實文字會告訴您它是否舒適,這比僅僅合法的標準更高。
低於該比例,您將獲得一個通過和失敗徽章網格:普通和大文本的 AA 和 AAA,以及 3:1 UI 組件檢查。如果組合失敗,該工具提供一鍵修復。它會在 HSL 空間中使文字顏色變淺或變深 - 保留您選擇的色調和飽和度 - 直到它清除目標比例,然後遞給你一個可以直接複製到樣式表中的傳遞值。最後一部分是責罵您的檢查器和真正有幫助的檢查器之間的區別:它保持您的品牌色調完整,並且僅將亮度移動所需的最小值。
一切都在您的瀏覽器中本地運行。您的裝置沒有顏色、調色板或未發布的品牌價值,這在您審核客戶端時很重要'預啟動設計系統。這是我在網站上的每個工具上使用的相同的隱私優先方法,我寫了為什麼該架構很重要 資料隱私指南.
真實專案的常見用例
審核設計系統和#39;s 代幣
當我為新專案設定顏色令牌時,我會在單一元件出貨之前檢查每個語義配對:背景上的主文字、背景上的靜音文字、主文字、卡片上的文字、每個警報變體上的文字。一旦在任何地方使用都失敗,在令牌層級捕獲它,那麼在每個組件捕獲它就會便宜得多。我保留一個簡單的清單並在檢查器中運行每對,記錄令牌名稱旁邊的比率。
拯救品牌顏色"有"被使用
行銷人員遞給你一個藍色品牌,並說按鈕必須使用它。您測試其上的白色文字並獲得 3.1:1 - 對於大文字來說很好,對於正常尺寸的按鈕標籤則不然。您有三個誠實的選擇:對於互動式表面,將品牌藍色稍微變暗,使用更大或更粗的標籤,以便應用 3:1 閾值,或者如果按鈕較淺,則將標籤切換為較深的顏色。工具'建議功能找到最近的傳遞陰影,以便您可以顯示行銷具體的、最小的變化,而不是平面"不。&引用;
檢查佔位符和幫助者文字
佔位符文字是重複違規者,因為瀏覽器預設將其渲染為降低的不透明度,然後設計人員在其上選擇已經較淺的灰色。記住測試合成結果,而不是標稱顏色。檢查器和#39; alpha 合成為您執行此操作:輸入佔位符顏色及其輸入背景上的真實不透明度,然後讀取真實比率。
驗證圖示和邊框可見性
對於 1.4。11 UI 檢查,我根據緊鄰其後面的任何內容測試圖示或邊框顏色。白卡上的灰色分隔線,彩色標題上的 V 形,場上的焦點環 - 所有這些都需要 3:1。這是一次快速檢查,可以捕捉 "從技術上講,一切都在那裡,但我可以'看到任何一個"錯誤類別。
與僅使用設計工具和#39;s 內建檢查相比,這怎麼樣?
設計工具增加了對比度指示器,瀏覽器開發工具顯示了顏色選擇器的比例,因此一個公平的問題是為什麼要使用專用工具。這是我誠實的比較。
| 方法 | 力量 | 限制 |
|---|---|---|
| 專用對比度檢查器 | 精確比率、所有閾值、alpha 合成、傳遞顏色建議適用於任何顏色字串 | 您手動貼上顏色 |
| 設計工具插件 | 與您的藝術板保持一致 | 通常近似,可能會忽略與該應用程式綁定的 alpha |
| 瀏覽器開發工具 | 檢查即時渲染頁面 | 一對,沒有建議,要求頁面先存在 |
| 盯著它看 | 快 | 錯了,總是 |
每當您使用值而不是渲染頁面時(查看令牌、檢查規格或修復報告的錯誤),以及當您需要傳遞的替代方案而不僅僅是結論時,專用工具就會獲勝。一旦頁面存在並且您想查找實際出貨的內容,瀏覽器開發工具就會變得更好。我在不同的階段使用兩者。
為關心的團隊提供高級筆記
我學到的一些東西超出了基礎。首先,對比是必要的,但還不夠。通過 4.5:1 會消除一個障礙;它不會使介面本身可訪問。你仍然需要可見的焦點狀態,你仍然必須避免僅透過顏色傳達意義,你仍然需要真正的輔助技術的真正測試。將比率視為底線,而不是終點線。
其次,黑暗模式不是免費的。在光模式下通過的調色板可能會在暗模式下失敗,因為亮度關係會反轉。檢查兩個主題。檢查器和#39;暗背景預覽切換的存在正是因為我一直忘記。
第三,要警惕"夠接近。" 4.48:1 的比例是失敗,而不是四捨五入獲勝。螢幕各不相同,用戶也各不相同,閾值內建了邊距是有原因的。如果你處於邊緣,請推過去。
如果您正在組裝更廣泛的工具包,則 web 開發人員工具包指南 涵蓋對比度如何與其他值得自動化的檢查相配合。一旦你的顏色過去了,諸如此類的工具 梯度產生器 和 選色器 幫助您在已驗證的基礎上建立調色板的其餘部分。如果您還產生頁面元資料和社交預覽,則 元標記產生器 在同一發射前通行證中配對良好。
問號
什麼是好的色彩對比度？
對於普通正文,目標是至少 4.5:1 滿足 WCAG AA,7:1 滿足更嚴格的 AAA 等級。大文本,意味著大約 24px 或 18.66px 粗體,只需要 AA 3:1 和 AAA 4.5:1。圖示和互動式 UI 元件至少需要 3:1 的比例來對抗周圍的環境。
WCAG 下的大型文字是什麼？
對於常規重量,大文字至少為 18pt,約 24px,或粗體時至少為 14pt,約 18.66px。等於或高於該尺寸的文字符合寬鬆的 3:1 AA 門檻,因為較大的字母形式在對比度較低的情況下比小的字母形式保持清晰。
WCAG AA 和 AAA 有什麼不同？
AA 是大多數法律和組織的目標級別,普通文本需要 4.5:1。 AAA 是增強級別,需要 7:1,適合針對低視力使用者的內容,但很難在整個調色板中擊中。大多數團隊將 AA 視為及格欄,將 AAA 視為批判性閱讀內容的願望。
對比度是如何計算的？
每種顏色都轉換為其 WCAG 相對亮度,這是一種伽馬校正和感知加權的亮度測量值。該比率是 (L_lighter + 0.05) 除以 (L_darker + 0.05),產生的值從相同顏色的 1:1 到純白上的純黑的 21:1。
透明度會影響對比度結果嗎？
是的。半透明文字顏色可以讓背景顯示出來,從而改變其有效顏色。正確的方法是先將半透明前景合成在背景上,然後測量比例,這樣分數反映用戶實際看到的內容,而不是您設定的標稱顏色。
為什麼我的文字大尺寸傳遞，但在正常大小時失敗？
閾值不同。 AA 的普通文字需要 4.5:1,而大文字只需要 3:1,因此標題的比例在 3 到 4.5 之間通過,但正文複製失敗。要么提高正文的對比度,要么確保僅在寬鬆閾值適用的大尺寸下使用配對。
通過對比度是否足以可訪問性？
不,對比是必要的,但還不夠。你還需要可見的焦點狀態,你必須避免僅透過顏色來傳達意義,並且你應該用真實的內容和輔助技術進行測試。通過該比率可以消除一個共同的障礙,但本身並不能使介面變得可訪問。
顏色對比度檢查器會將我的顏色發送到任何地方嗎？
不。所有解析和數學都使用 JavaScript 在瀏覽器中本地運行。不會上傳或儲存顏色值、品牌調色板或螢幕截圖,一旦頁面載入,該工具將繼續在沒有網路連線的情況下運作。
