共通設計理論教材 / Class LLL

對比、背景與狀態辨識

比值說明一組色對，不能代替整個判斷

使用同一清單切白底／深底與色票，依實際指定sRGB色計算相對亮度與對比。一般文字4.5:1、必要非文字3:1的用途分開；達到一個色對門檻，不保證狀態語義或全站可用。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 10 分鐘

開啟互動教材查看參考來源

閱讀目標

先指定用途與真正相鄰色
區分解碼相對亮度與編碼灰值
把色對門檻與尺寸、語義及全站條件分開

適用條件與學習範圍

一個標記和底色的比值足夠，為什麼仍可能分不清三個狀態？

理解不只靠顏色的冗餘；知道HSL L與編碼RGB灰值不是WCAG相對亮度。

能說出本次前景／背景／用途，讀取相對亮度與對比，切背景重查；用同灰約4.48與12px反例解釋門檻、尺寸及語義的不同責任。

只算全不透明、純色、sRGB已指定色對。沒有透明疊色、漸層、ICC／CMYK、實體光度或反鋸齒像素量測；不聲稱全站WCAG認證或真人可讀性／顯著性結果。

原理與判斷

把同一個深色字放在白底與深底，字碼和字級沒有變，卻會改變它與背景的對比條件。顏色名稱、HSL L差或兩個RGB碼值相減，都不能直接取代WCAG的對比計算。本例用樣本實際指定的全不透明sRGB色，先解碼，再按相對亮度與對比公式列讀數。它回答有限色對條件，不預測注意力、美感或每位讀者能否辨認；三個符號全看得見，也可能因線索相同而沒有區分狀態。

文字與必要非文字，先分用途

WCAG2.2 §1.4.3是AA級文字對比條件，一般文字4.5:1，大型文字另有3:1及規定例外；§1.4.11則對辨識必要的非文字控制、狀態與圖形部分規定3:1並列例外。這不是看見任何邊框都套同一門檻。教具標籤固定Noto18px／400，採一般文字4.5:1比較；符號色對以「若該圖形為理解必要」標示3:1。中文大型文字也有等效尺度條件，不能把18px誤讀成規範的18pt，或為了降低門檻自行宣稱字大。

前景和哪一個背景相鄰

本例沒有透明或漸層，文字與符號都直接落在白底#ffffff或深底#111b24，讀數列出實際色碼與相對亮度。切換背景會同時更新樣本及色對表；介面的按鈕與官方識別維持原樣。 Understanding Non-text 對比解釋必要控制與狀態資訊、相鄰顏色、裝飾邊界及不同狀態的區別。前後兩個非相鄰狀態的色差，不是每次都另有3:1要求；應核對當下辨識所依賴的圖形與其相鄰色。真成品若加入半透明玻璃、照片或漸層，就需重新找實際條件，不能沿用本頁純色數字。

sRGB先解碼，再求相對亮度

WCAG固定版本的sRGB公式把8bit通道除255；小於等於0.04045時除12.92，否則用((c+0.055)/1.055)^2.4解碼。再以0.2126R+0.7152G+0.0722B求相對亮度L；最後計算(L較高+0.05)/(L較低+0.05)。本例色票、樣本與讀數共用同一模型，不把HSL L、HSV V或未解碼的RGB加權灰值混入公式。黑白可得到21:1，同色是1:1；這些是指定色對計算，不是量到螢幕實際發光或印墨反射。

反例：同灰約4.48，兩個用途不同

選同灰#777777配白底。一般文字和符號都得到約4.48:1，但前者低於4.5:1，必要圖形的色對可達3:1。顯示值可為方便閱讀四捨五入，判斷必須使用未四捨五入值，不能把接近門檻當作通過。再把形狀、文字關掉：三個灰圓即使和底色有對比，也不能從相同形狀及顏色說出哪個需修正。可計算對比回答可見線索的局部條件，不能自行補上消失的資訊。

反例：12px符號，數字不會替你看輪廓

把符號由24縮到12px，色碼沒有變，所以公式比值不變；但形狀細節與實際呈現仍要檢查。非規範Understanding也提醒細筆畫、反鋸齒及字形特徵可能影響實際觀察，名義色對不是閱讀成效保證。沒有任何單一比值涵蓋原生語義、鍵盤、文字重排、焦點、動態與完整流程。沿相關教材補讀這些責任，並在真實平台與使用者條件下確認；本頁不提供全站認證、色覺診斷或自動學會分數。

步驟與觀察

先說明本輪用途與色對
重設，確認一般18px／400文字與必要符號是不同用途；讀表中前景、背景與L，不只記一個比值。
只改背景，再只改色票
保持資料與線索，白底切深底；還原後只換淡色。比對實際樣本與表列數值，不歸因給讀者能力。
檢查同灰用途與縮小反例
同灰配白底約4.48，一般文字低於4.5、必要圖形色對可達3。只把符號切12px，看比值不變卻仍需查輪廓。
補讀冗餘，返回保留方案
沿色彩形狀文字教材看語義區分；返回／重載保留本頁底色／尺寸。單頁重設只改本ID。

常見問題

用RGB碼值差或HSL L差算WCAG對比

先按指定sRGB曲線解碼，再求相對亮度及比值；本例與舊編碼灰階教具是不同模型。

把顯示4.50直接當通過

依未四捨五入數值判斷；必須先說明用途、字級及真正相鄰色。

三個標記的比值都夠，就認為狀態可區分

另查形狀、文字、約定與實際尺寸；相同灰圓不會因對比充足而產生三種意思。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：跨工具的色彩冗餘、指定sRGB色對與狀態辨識；原創三筆校樣清單，不是設計軟體操作。來源狀態：實讀WCAG2.2固定2024-12-12 W3C Recommendation §1.4.1、1.4.3、1.4.11及contrast ratio／relative luminance／large scale定義；Understanding Use of 顏色、對比最小與Non-text 對比的用途、條件、相鄰色與門檻解說。Understanding是非規範解說，不把範例技術當唯一強制做法。S20只支援無強制位移的替代呈現界線，詳細動態教材引用唯一頁。示意限制：重用QZ23原創雙座校樣架。三筆狀態、順序與底色同源；A視覺只色彩，B可分別切色彩、幾何、原生文字，另白／深背景、同灰／淡色與12／24px反例。完整資料表一直可選取。WCAG讀數與實際樣本使用相同全不透明sRGB色碼，解碼後加權，不用HSL L或編碼RGB灰值代替。原生軟體實測：僅網站Chromium的HTML／SVG／computed style、本地字型及公開操作檢查；不是Ps／Ai／Figma像素、ICC／CMYK、校準螢幕或多瀏覽器全站稽核。學習成效驗證：沒有色覺模擬或醫療診斷、眼動、真人辨認率／可用性或學習成效實驗；符合單一色對條件不構成全站WCAG認證。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。