顏色對比檢查器

顏色對比檢查器 協助設計師、開發者和無障礙專業人士確保顏色組合符合 WCAG 2.x 無障礙標準。文字與背景顏色之間適當的對比度對於閱讀體驗至關重要，特別是對於視力低落或有色覺障礙的使用者而言。

什麼是顏色對比度？

顏色對比度衡量兩種顏色之間感知的 亮度（Brightness）差異。其範圍從 1:1（顏色相同，無對比度）到 21:1（最大對比度：白底黑字）。此比例是根據兩者的相對亮度值，使用 WCAG 2.x 公式計算得出的。

WCAG 對比度要求

Web 內容無障礙指南 (WCAG) 定義了兩個級別的顏色對比度合規標準：

什麼被算作「大文本」？

WCAG 將大文本定義為至少 18 點 (24px) 的常規字重，或至少 14 點 (18.66px) 的粗體字重。大文本的對比度要求較低，因為較大的字元自然更容易閱讀。

如何使用此工具

1. 輸入您的顏色： 使用檢色器選擇前景（文字）和背景顏色，或輸入十六進位代碼（Hex），亦可點擊預設範例。
2. 查看即時預覽： 立即查看您的顏色在實際 UI 元素（標題、正文、按鈕、連結、表單輸入框）上的效果。
3. 點擊「檢查對比度」： 獲取確切的對比度，以及一般文本、大文本和 UI 組件的 WCAG 合規狀態。
4. 應用建議： 如果您的顏色未達標，請使用自動建議來尋找最接近且符合標準的替代方案。

理解結果

對比度

主數值（例如 8.59:1）告訴您兩種顏色的差異程度。數值越高，可讀性越好。至少 4.5:1 的比例可確保大多數使用者能舒適地閱讀一般大小的文字。

整體評級

• AAA (卓越)： 通過所有 WCAG 標準，包括增強型 (7:1+)。最佳的無障礙程度。
• AA (良好)： 通過標準要求 (4.5:1+)。符合大多數地區的法律要求。
• AA 大文本 (部分通過)： 僅通過大文本或 UI 組件的要求 (3:1+)。一般文本未達標。
• 不合格 (差)： 未能滿足任何 WCAG 對比度標準。對於許多使用者來說，文字將難以閱讀。

顏色建議

當您的顏色不符合對比度要求時，該計算機會在保持色相和飽和度的同時，透過調整亮度來建議 最接近的無障礙顏色。您可以一鍵套用建議。

為什麼顏色對比度很重要

• 法律合規： 許多國家透過法律（如 ADA、Section 508、EN 301 549、EAA）要求符合 WCAG AA 標準。
• 使用者體驗： 良好的對比度能提升所有使用者的閱讀效率，而不僅僅是身障人士。
• SEO 影響： 搜尋引擎日益將無障礙程度納入排名權重。
• 受眾範圍： 全球約有 1/12 的男性和 1/200 的女性患有色覺障礙。

選擇無障礙顏色的技巧

• 從具備充足對比度的設計開始，然後再微調——事後補救對比度會更加困難。
• 避免在未經測試的情況下將彩色文字放在彩色背景上。即使看起來「明顯不同」的顏色也可能無法通過對比度檢查。
• 白色背景上的淺灰色文字是最常見的無障礙失敗案例之一。
• 在設計過程中就使用此工具，而不僅僅是在審計階段——及早發現問題可以節省大量重做的時間。
• 不要僅依賴顏色來傳達資訊；應同時使用形狀、圖案或標籤。

常見問題

什麼是顏色對比度？

顏色對比度衡量兩種顏色之間感知亮度的差異。其範圍從 1:1（無對比度，相同顏色）到 21:1（最大對比度，白底黑字）。對比度是使用 WCAG 2.x 公式計算的：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮顏色的相對亮度，L2 是較暗顏色的相對亮度。

WCAG AA 合規性需要什麼對比度？

WCAG AA 要求一般文本（18pt 以下或 14pt 粗體以下）的最小對比度為 4.5:1，大文本（18pt+ 或 14pt+ 粗體）為 3:1。對於非文本 UI 組件和圖形對象，最小值為 3:1。

WCAG AA 和 AAA 有什麼區別？

WCAG AA 是標準合規級別，要求一般文本為 4.5:1，大文本為 3:1。WCAG AAA 是增強級別，要求一般文本為 7:1，大文本為 4.5:1。大多數無障礙法律要求達到 AA 級，而 AAA 級是建議性的，通常不強制要求整個網站達成。

在 WCAG 指南中，什麼被視為大文本？

在 WCAG 指南中，大文本定義為至少 18 點 (24px) 的常規字重，或至少 14 點 (約 18.66px) 的粗體字重。大文本的對比度要求較低，因為較大的字元更容易閱讀。

如何修復低顏色對比度？

修復低顏色對比度的方法：(1) 加深文字顏色或調淺背景顏色，反之亦然。(2) 使用我們的顏色建議功能，自動尋找最接近且通過測試的顏色。(3) 增加字體大小以符合對比度要求較低的「大文本」標準。(4) 避免僅使用顏色來傳達資訊。

顏色對比度只適用於文本嗎？

不是。WCAG 2.1 成功準則 1.4.11 要求非文本元素（包括表單輸入框邊框、圖示和理解內容必不可少的圖形對象）的最小對比度為 3:1。這適用於按鈕、表單欄位和焦點指示器等 UI 組件。

其他資源

• WCAG 2.1：理解對比度（最低限度）
• WCAG 2.1：理解對比度（增強型）
• 網頁內容無障礙指南 - 維基百科