使用步驟
- 用取色器選擇，或直接輸入文字顏色和背景色，支援十六進位制、rgb()、hsl()、oklch() 和顏色名。
- 檢視對比度和四項 WCAG 判定，下方預覽實際效果。
- 不達標時，點選推薦顏色旁的「使用這個顏色」即可替換。
引數說明
- AA 標準
- 正文至少 4.5:1，大字（18pt 即 24px 以上，或 14pt 即約 18.7px 以上的粗體）至少 3:1。大多數法規和設計規範要求達到 AA。
- AAA 標準
- 正文至少 7:1，大字至少 4.5:1，適合對可讀性要求更高的內容。
- 推薦顏色
- 在 OKLCH 色彩空間裡保持色相和彩度，只調整亮度，找出剛好達標、與原色最接近的顏色。
- 半透明顏色
- 帶透明度的文字顏色按疊加在背景上後的實際顏色計算。
對比度是怎麼算出來的
每個顏色先從 sRGB 轉換成線性光，再算出相對亮度：
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)綠色的權重最大，因為人眼對它最敏感。以下是白色背景上的一些結果：
| 文字顏色 | 對比度 | 結果 |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5.57 : 1 | AA 正文通過，AAA 正文不通過 |
| #767676 | 4.54 : 1 | AA 正文通過 |
| #777777 | 4.48 : 1 | AA 正文不通過，大字通過 |
WCAG 的定義見 Understanding Success Criterion 1.4.3。
常見問題
對比度是怎麼算的？
按 WCAG 2.x 的公式：(較亮顏色的相對亮度 + 0.05) ÷ (較暗顏色的相對亮度 + 0.05)，結果在 1:1 到 21:1 之間。純黑配純白是 21:1。
#767676 為什麼常被提到？
它是白色背景上能達到 4.5:1（約 4.54:1）的最淺灰色，常被用作輔助文字的顏色下限。
圖示、邊框也需要檢查嗎？
需要。WCAG 2.1 起要求介面元件和圖形（按鈕邊框、輸入框、圖示）與相鄰顏色的對比度至少 3:1。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。