顏色對比檢查器
MiniWebtool 的色彩對比檢查工具會使用 WCAG 2.x 對比度比率比較文字與背景顏色。輸入前景及背景色值，即可查看該配色是否符合畫面顯示的一般文字、大型文字及介面對比度門檻。
不確定怎麼使用？問問 AI
你的廣告攔截器讓我們無法顯示廣告
MiniWebtool 依靠廣告收入免費提供服務。如果這個工具幫到了你，歡迎升級以獲得無廣告瀏覽和更多每日使用次數，或將 MiniWebtool.com 加入白名單後重新整理。
- 允許 MiniWebtool.com 顯示廣告，然後重新整理
- 或升級取得無廣告瀏覽和更高每日額度
顏色對比檢查器
顏色對比檢查器 協助設計師、開發者和無障礙專業人士確保顏色組合符合 WCAG 2.x 無障礙標準。文字與背景顏色之間適當的對比度對於閱讀體驗至關重要，特別是對於視力低落或有色覺障礙的使用者而言。
功能概覽
顏色對比檢查器量測文字顏色與背景顏色之間的 WCAG 2.x 對比度。它會回報此組合在一般文字、大字與介面元件上，是否通過 AA 與 AAA 標準。
| 功能 | 提供內容 | 適用情境 |
|---|---|---|
| 對比度 | 依兩種顏色的相對亮度計算，範圍從 1:1（相同）到 21:1（白底黑字）。 | 檢查文字與背景的組合 |
| AA 與 AAA 等級 | 一般文字 AA 需 4.5:1，AAA 需 7:1。大字 AA 需 3:1，AAA 需 4.5:1。UI 元件與圖形需 3:1。 | 依 WCAG 2.x 要求檢測設計 |
| 大字規則 | 大字指至少 18 pt（24 px）的一般字重，或 14 pt（約 18.66 px）的粗體字。 | 判斷標題或按鈕應採用哪一個門檻 |
| 顏色輸入 | 使用顏色選擇器、輸入 HEX 代碼，或點選預設範例。交換選項可互換前景與背景色。 | 雙向測試一組顏色 |
| 即時預覽 | 以標題、內文、按鈕、連結與表單欄位顯示你的顏色。 | 在實際介面元素上判斷可讀性 |
| 修正建議 | 組合未通過時，工具會在保持色相與飽和度的前提下調整明度，建議最接近的通過顏色。 | 修正剛好低於門檻的品牌色 |
| 顏色數值 | 顯示每種顏色的 HEX、RGB、HSL 與亮度值。 | 將精確數值複製到樣式表中 |
什麼是顏色對比度？
顏色對比度衡量兩種顏色之間感知的 亮度（Brightness）差異。其範圍從 1:1（顏色相同，無對比度）到 21:1（最大對比度：白底黑字）。此比例是根據兩者的相對亮度值，使用 WCAG 2.x 公式計算得出的。
WCAG 對比度要求
Web 內容無障礙指南 (WCAG) 定義了兩個級別的顏色對比度合規標準：
| 元素類型 | WCAG AA | WCAG AAA |
|---|---|---|
| 一般文字 (<18pt / <14pt 粗體) | 4.5 : 1 | 7 : 1 |
| 大文字 (≥18pt / ≥14pt 粗體) | 3 : 1 | 4.5 : 1 |
| UI 組件與圖形 | 3 : 1 | — |
什麼被算作「大文字」？
WCAG 將大文字定義為至少 18 點 (24px) 的常規字重，或至少 14 點 (18.66px) 的粗體字重。大文字的對比度要求較低，因為較大的字元自然更容易閱讀。
如何使用此工具
- 輸入您的顏色： 使用檢色器選擇前景（文字）和背景顏色，或輸入十六進位代碼（Hex），亦可點擊預設範例。
- 查看即時預覽： 立即查看您的顏色在實際 UI 元素（標題、正文、按鈕、連結、表單輸入框）上的效果。
- 點擊「檢查對比度」： 獲取確切的對比度，以及一般文字、大文字和 UI 組件的 WCAG 合規狀態。
- 應用建議： 如果您的顏色未達標，請使用自動建議來尋找最接近且符合標準的替代方案。
理解結果
對比度
主數值（例如 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 組件。
其他資源
引用此內容、頁面或工具為：
"顏色對比檢查器" 於 https://MiniWebtool.com/zh-tw/顏色對比檢查器/，來自 MiniWebtool，https://MiniWebtool.com/
由 miniwebtool 團隊製作。更新日期：2026年2月11日
和喜歡的 AI 聊聊這個工具
使用 Gemini 時，請將複製的問題貼到對話框，也可以在下方手動複製。