WCAG 顏色對比度檢測
實時計算前景色與背景色的 WCAG 對比度比值，標註 AA / AAA 通過狀態，並以按鈕、卡片、輸入框組件預覽效果。支持導出 CSS 變量。
Contrast ratio
21.00:1
WCAG 2.2 results
| Category | AA | AAA |
|---|---|---|
| Normal text | Passneed 4.5:1 | Passneed 7:1 |
| Large text (≥18pt) | Passneed 3:1 | Passneed 4.5:1 |
| UI components | Passneed 3:1 | Passneed 4.5:1 |
Component preview
CSS export
:root {
--color-text: #000000;
--color-bg: #ffffff;
}使用說明
- 1 選擇或輸入前景色（文字）和背景色
- 2 查看對比度比值以及 AA / AAA 各檔位的通過狀態
- 3 在組件預覽中驗證效果，必要時導出為 CSS 變量
相關工具
關於此工具
本工具根據 WCAG 2.2 規範計算兩種顏色的相對亮度差，輸出對比度比值（1-21）。WCAG 要求普通文字至少達到 4.5:1（AA）或 7:1（AAA），大號文字至少 3:1（AA）或 4.5:1（AAA），UI 組件（輸入框邊框、圖標）至少 3:1。對比度不足會導致色弱用戶、老年用戶或在強光環境下閱讀困難。
工具會同時展示按鈕、卡片、輸入框、超鏈接等真實組件的視覺效果，比單純看色塊更貼近實際使用場景。還會給出每對顏色的二進制表示，方便設計師與開發者溝通。
所有計算在瀏覽器本地完成，無需上傳任何數據。
常見問題
WCAG 2.2 和 WCAG 2.1 在對比度上有區別嗎？ +
對比度本身規則沒變（仍是 4.5:1 / 3:1 等閾值）。2.2 主要補充了「非文字對比度」和「聚焦可見性」的細則，明確要求 UI 組件（按鈕邊框、圖標、表單控件邊界）與相鄰顏色的對比度至少 3:1。本工具同時檢測文字和 UI 組件兩個維度。
為什麼我看起來很清楚的配色仍判為不通過？ +
WCAG 是基於相對亮度（考慮人眼對不同顏色的敏感度）計算的，不是簡單的色差。常見的失敗案例：紅底綠字（色弱用戶無法區分）、深灰底淺灰字（亮度差不足）、品牌色作為按鈕文字（很多品牌色飽和度高但亮度不夠）。建議使用本工具測試後再上線，而不是僅憑肉眼判斷。
「AA」和「AAA」分別在什麼場景下要求？ +
AA 是大部分法規（如歐盟 EN 301 549、美國 Section 508）和商業網站的最低要求。AAA 是更高標準，主要用於公共服務、醫療、教育類網站，要求更嚴格（普通文字 7:1）。如果你的網站需要服務老年、視障人群或希望獲得無障礙認證，建議達到 AAA。
大號文字的判定標準是什麼？ +
WCAG 定義「大號文字」為：粗體 ≥ 14pt（18.66px）或常規體 ≥ 18pt（24px）。大號文字的對比度閾值更低（AA 3:1 / AAA 4.5:1），因為大字號本身更易讀。工具會同時顯示兩種文字檔位的結果，讓你按實際字號判斷。
工具支持哪些輸入格式？ +
支持 HEX（#RRGGBB）、RGB（rgb(255, 0, 0)）、以及原生顏色選擇器。結果輸出可一鍵複製為 CSS 變量（如 --color-text: #000000;），方便集成到設計系統或 Tailwind 配置中。