怎麼依 WCAG 檢查顏色對比度

兩個十六進位值都在手邊再開顏色對比度檢查。內文對照 4.5:1，24px 以上的標題對照 3:1，圖示和邊框對照 3:1。不上傳。

1. 記住門檻

   WCAG 2 AA：內文 4.5:1，大字 3:1。AAA：7:1 和 4.5:1。大字是 24px 一般字重或約 18.7px 粗體。圖示、邊框和表單控制項要 3:1。

   

2. 打開 cv.cm 的顏色對比度檢查

   已填一組範例的奶油底粉色。對比度和通過/不通過各列在右側，文字範例在上方。不上傳。

   打開對比度檢查

3. 填兩個顏色

   文字填 #777777 之類的十六進位值，背景填 #ffffff，或者用色塊挑。三位的 #777 也行。範例會隨輸入更新。

4. 讀對比度和各列

   #ffffff 上的 #777777 是 4.48:1：AA 大字和介面元件通過，AA 內文不通過。每一列依自己的門檻寫「通過」或「不通過」。

5. 採用建議的顏色

   內文 AA 不通過時，頁面會朝黑或白的方向建議最接近且達到 4.5:1 的文字色。白底上的 #777777 會建議 #767676。「交換」把文字和背景對調。

   

6. 每種狀態都查，然後複製

   連結、滑過和停用的顏色都再查一遍；圖片上的文字，拿圖片最暗的部分當背景。「複製」把顏色、對比度和結果放到剪貼簿。