顏色格式轉換與 WCAG 對比度檢測器

在 HEX、RGB、HSL、CMYK 之間實時轉換顏色,並自動計算 WCAG 無障礙對比度(AA/AAA)。支援印刷用 CMYK 百分比與可視化預覽。全程本機處理不上傳。

文字預覽

轉換結果

RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)

無障礙檢測 (WCAG)

白色文字0.00:1
小號文字 (AA)失敗
大號文字 (AA)失敗
黑色文字0.00:1
小號文字 (AA)失敗
大號文字 (AA)失敗

如何使用

  1. 輸入 HEX/RGB/HSL 任意一種格式,或用取色器選擇顏色。
  2. 工具自動同步輸出其他格式(含 CMYK)。
  3. 在 WCAG 面板查看與黑/白文字的對比度比值及 AA/AAA 結果。
  4. 點擊複製,把顏色值貼上到代碼或設計稿中。

核心功能

  • HEX/RGB/CMYK 轉換 + WCAG 檢測:一站式完成顏色格式轉換與可訪問性檢查。
  • WCAG 對比度檢測:自動計算對比度並給出 AA/AAA 通過/失敗結果。
  • 印刷用 CMYK 轉換:輸出 CMYK 百分比,方便平面與印刷設計使用。
  • HSL 顏色空間:支援 HSL 調整,更直觀地控制色相/飽和度/亮度。
  • 系統取色器集成:使用系統顏色選擇器快速取色與預覽。

相關工具

計算邏輯

  • 轉換:實現 RGB↔HSL、RGB↔CMYK 的標準數學映射。
  • WCAG:先計算相對亮度,再計算對比度比值。
  • 相對亮度近似可寫爲:(L = 0.2126R + 0.7152G + 0.0722B)。
  • 對比度爲:(\frac{L_1 + 0.05}{L_2 + 0.05}),並據此判斷 AA/AAA。

常見問題

如何檢查顏色是否符合無障礙 (WCAG) 標準?

輸入顏色後查看「WCAG」面板。工具會計算與黑/白文字的對比度並給出 AA/AAA 通過/失敗結果。

如何將 HEX 轉換爲 CMYK 用於印刷?

輸入 HEX(如 #FF0000),工具會即時輸出 CMYK 百分比(如 0, 100, 100, 0),可直接用於印刷設計。

資料安全嗎?會上傳到伺服器嗎?

不會。顏色轉換與對比度計算在瀏覽器本機完成,不上傳任何顏色資料。

是否免費?是否支援批次?

免費使用。當前以單色轉換與檢測爲主;批次場景建議逐個驗證關鍵色(主色/文字色/背景色)。

WCAG 對比度爲什麼要用 0.05?

這是 WCAG 的規範項,用於避免極端情況下除零並更貼近人眼感知的可讀性評估。