⚡全部工具 💻開發者與編碼 📝文字與內容 🎨設計與色彩 🖼️圖片與多媒體 🔢數據與計算 🔒安全與密碼 📄PDF 工具 📐單位與進度轉換

色彩對比度與無障礙檢測器

計算前景與背景色彩對比度，提供智慧符合 WCAG 2.1 標準的配色修復，並支援 Canvas 四種色盲模擬與 drag-and-drop 圖片色彩提取。

⚖️ 配色對比度檢測 (WCAG 2.1)

文字顏色

背景顏色

對比度

12.3:1

WCAG 2.1 AA

PASS

WCAG 2.1 AAA

PASS

元件即時預覽

這是一段用於測試可讀性的範例文字。好的色彩對比度能讓每個人都清晰閱讀您的網頁內容。

✨ 智慧配色修復

一鍵自動調校文字亮度以符合 AA 級 (4.5:1) 標準

👁️ 圖片色盲模擬 (Canvas 濾鏡)

📤 拖曳圖片至此或點擊上傳支援 PNG, JPG, WebP 圖片，完全在本地瀏覽器處理

模擬視覺類型

📚 網頁設計色彩無障礙指南 (WCAG 2.1)

AA 級標準：一般文字對比度需達 4.5:1 以上，大尺寸文字 (18pt 以上) 需達 3:1 以上。
AAA 級標準：一般文字對比度需達 7.0:1 以上，大尺寸文字需達 4.5:1 以上。
相對亮度（Luminance）代表顏色的視覺明度，範圍從 0（最暗的黑）到 1（最亮的白）。

使用方式

1 開啟色彩對比度與無障礙檢測器，輸入、貼上或選擇要處理的內容。
2 依需求調整頁面上的選項與格式。
3 確認即時結果，再複製或下載可用的輸出。

適合的使用情境

計算前景與背景色彩對比度，提供智慧符合 WCAG 2.1 標準的配色修復，並支援 Canvas 四種色盲模擬與 drag-and-drop 圖片色彩提取。適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。

WCAG 色彩對比度怎麼算？AA、AAA 標準與色盲模擬

這個色彩對比度檢查工具依照 WCAG 2.1 的公式計算文字色與背景色的對比度：先把 RGB 轉成「相對亮度」，再用（較亮者 + 0.05）÷（較暗者 + 0.05）得出 1:1 到 21:1 之間的比值。黑字白底是最高的 21:1，同色則是 1:1。你可以用色票或直接輸入 HEX 色碼，預覽區會同步顯示文字與按鈕的實際效果。

WCAG 的 AA 等級要求一般文字至少 4.5:1，AAA 等級要求 7:1；大字（18pt 以上，或 14pt 粗體）的門檻分別放寬到 3:1 與 4.5:1。工具上的 AA／AAA 標章以一般文字門檻判定。對比度不能四捨五入：例如 #777777 在白底上是 4.47:1，看起來很接近，但仍然不合格；改用 #767676 就是 4.54:1，剛好通過 AA。#595959 白底則約 7.00:1，可達 AAA。

如果配色不及格，可以按「智慧修復」：工具會保留原本色相方向，逐步把文字色調亮（深色背景）或調暗（淺色背景），直到達到 AA 的 4.5:1；若調整範圍內仍達不到，就改用純黑或純白。這是快速找到可用色的捷徑，品牌色仍建議再由設計師微調。

右側的色盲模擬器可以上傳圖片或使用範例圖，以色彩矩陣模擬紅色盲（Protanopia）、綠色盲（Deuteranopia）、藍色盲（Tritanopia）與全色盲（Achromatopsia）的視覺效果，檢查圖表、地圖或狀態色是否只靠顏色區分。圖片會縮到 800×600 以內在瀏覽器的 Canvas 處理，不會上傳；模擬為近似效果，實際色覺差異因人而異。