開發者工具

取色與顏色對比

支援 HEX(#RGB/#RRGGBB)、rgb(0–255, 0–255, 0–255) 或 hsl(0–360, 0–100%, 0–100%)。

單張 JPEG/PNG/WebP · 8 MB/4 MP/4096px

#356A47rgb(53, 106, 71)hsl(140.4, 33.3%, 31.2%)

輸入色值或選擇圖片。

圖片與色值只在目前瀏覽器處理,不上傳或儲存。

使用說明與常見問題

點擊本機圖片取色,或直接輸入色值,複製 HEX、RGB、HSL;預覽前景與背景,檢查 WCAG 2 文字對比度,圖片無需上傳。

使用步驟

  1. 輸入前景與背景色,或選擇圖片。
  2. 點擊像素取色,也可用方向鍵或精確座標。
  3. 檢查對比度後複製色值或下載報告。

顏色與對比度範圍

支援 #RGB、#RRGGBB、整數通道的 rgb(r, g, b),以及 hsl(h, s%, l%);色相為 0–360,百分比為 0–100。輸入顏色為不透明 sRGB。HSL 顯示四捨五入至一位小數,HEX/RGB 保留精確的 8 位色值。瀏覽器解碼與 Canvas 提供 sRGB 像素取樣,不保證 ICC 校色或印刷打樣。

按 WCAG 2 的線性化 sRGB 相對亮度計算。一般文字 AA 為 4.5:1,大型文字 AA 為 3:1,一般文字 AAA 為 7:1。大型文字指至少 18pt,或至少 14pt 粗體。是否通過使用未捨入比值,顯示值經過捨入;這裡只檢查一對顏色,不代表整頁符合無障礙規範。

單張靜態 JPEG/PNG/WebP,最多 8 MB、4 MP、單邊 4096px;先校驗格式與尺寸,再按方向解碼。不上傳、持久儲存或存取圖片網址。替換、移除或離頁釋放像素;編輯使報告任務與 URL 失效,檢查點預算為 45 秒。

常見問題

透明像素可以直接當作不透明文字色嗎?

透明像素的顯示取決於背景。取樣後先與所選背景色合成,再計算對比度;完全透明像素中隱藏的 RGB 不作為可見顏色。