對比度檢查工具（WCAG 標準判定）
輸入兩種顏色，即可計算 WCAG（Web Content Accessibility Guidelines）對比度，並判定是否符合 AA、AAA 標準。
WCAG 對比度標準一覽
| 標準等級 | 適用物件 | 所需對比度 |
|---|---|---|
| AA（最低要求） | 正常文本 | 4.5:1 以上 |
| AA（最低要求） | 大號文本（18pt 以上，或 14pt 以上粗體） | 3:1 以上 |
| AA（最低要求） | UI 元件與圖形物件 | 3:1 以上 |
| AAA（更高標準） | 正常文本 | 7:1 以上 |
| AAA（更高標準） | 大號文本 | 4.5:1 以上 |
什麼是對比度
對比度是用 1:1（無差異）到 21:1（黑白之間的最大差異）之間的數值，來表示文字顏色與背景顏色在明暗上的差異。數值越大，文字就越容易辨認。WCAG（Web Content Accessibility Guidelines）正是基於這個數值，制定了 AA、AAA 兩個等級的合規標準。本工具會根據輸入的兩個顏色代碼自動計算對比度，讓你一眼就能看出是否滿足其中五項具體標準。
計算的基礎是一個稱為「相對亮度（relative luminance）」的數值。它並不是 HSL 中的 L 值那樣簡單的明度，而是先去除 sRGB 的伽瑪校正，再按照人眼對紅、綠、藍三種顏色的敏感度差異分別加權後相加，因此更接近人眼實際感受到的明暗印象。相近的顏色幾乎必然會得到較低的對比度，因此「未通過」並不代表所選顏色本身有問題，而只是說明兩者之間的明暗差距需要進一步拉大。
對比度檢查工具的使用方法
- 輸入文字顏色 可以透過取色器選擇，也可以直接輸入十六進位制顏色代碼，預設值為深灰色（#333333）。
- 輸入背景顏色 同樣可以透過取色器或十六進位制顏色代碼指定，預設值為白色（#ffffff）。
- 查看計算結果 輸入後會即時顯示對比度數值，以及針對 AA、AAA 各項標準的通過/未通過標記。
- 按需交換顏色 點選「交換顏色」按鈕即可反轉文字色與背景色，方便以相反的配色方案再次比較。
用好本工具的小技巧
- 文字顏色和背景顏色既可以通過取色器選擇，也可以直接輸入十六進位制顏色程式碼（支援 `#RRGGBB` 和 `#RGB` 兩種格式）。
- 點選「交換顏色」按鈕可以快速交換文字色與背景色進行對比，在比較多套 Logo 或圖示配色方案時非常方便。
- AAA 標準比 AA 標準更嚴格。一般網站建議至少達到 AA 標準，但對可讀性要求特別高的內容，建議以 AAA 標準為目標。
- 按鈕邊框、圖示等「UI 元件與圖形物件」的對比度要求（3:1 以上）是 WCAG 2.1 新增的成功標準（1.4.11）。
這些場景中會用到本工具
檢查按鈕與連結的配色
輸入網站主要操作按鈕或文字連結的文字色與背景色，確認是否滿足 AA 標準（4.5:1 以上）。
核對 Logo、橫幅與背景色的搭配
可以提前驗證 Logo 顏色或宣傳橫幅上的文案，在實際使用的背景色上是否依然保持足夠的可辨識度。
審核設計系統的配色方案
逐一輸入現有品牌色與文字色的組合，全面檢查整套 UI 是否滿足無障礙要求，並留存檢查結果。
驗證深色模式的配色
有助於逐項確認為深色模式反轉後的配色，是否與淺色模式一樣滿足對比度標準。
術語解釋
- 相對亮度（relative luminance）
- 在去除 sRGB 伽瑪校正後，按人眼對紅、綠、藍三色敏感度差異加權求和得到的明度指標，是計算對比度的基礎。
- 對比度
- 由較亮顏色與較暗顏色的相對亮度計算得出、介於 1:1 到 21:1 之間的數值。數值越大，兩種顏色的明暗差異越大，文字也越容易閱讀。
- WCAG
- Web Content Accessibility Guidelines 的縮寫，是由 W3C 制定的國際性網頁無障礙指南，對比度的達標標準也在其中定義。
- AA 標準
- WCAG 中第二高的達標等級，要求正常文字的對比度不低於 4.5:1，被許多法規和指南視為最低目標水準。
- AAA 標準
- WCAG 中最高的達標等級，要求正常文字的對比度不低於 7:1。雖非強制要求，但在特別重視可讀性的場景中值得追求。
- 大號文本
- WCAG 所定義的、18pt（約 24px）以上的常規字型，或 14pt（約 18.66px）以上粗體字的分類，適用比正常文字更寬鬆的標準。
- UI 元件
- 按鈕邊框、輸入框輪廓、圖示等表示可操作物件的視覺元素。WCAG 2.1 新增了針對這類元素、不低於 3:1 的對比度要求。
常見問題
閒話 ― 無障礙標準誕生的背景
WCAG（Web Content Accessibility Guidelines）是由 W3C（World Wide Web Consortium，全球資訊網聯盟）主導制定的國際性指南，其最初版本 WCAG 1.0 釋出於 1999 年。早在當時，減少視覺障礙使用者藉助螢幕閱讀器等輔助技術使用網頁時所遇到的障礙，就已被視為一項重要課題。
對比度標準之所以受到重視，與人類視覺的多樣性密切相關：一定比例的人群存在色覺異常（色弱），例如男性中約每 20 人就有 1 人；隨著年齡增長，晶狀體發黃會導致對比敏感度下降；此外，在室外強烈日光下手機螢幕也會變得難以看清。設定數值化的標準，使設計師不必僅憑主觀的「是否好看」來判斷，而能夠客觀地驗證內容的無障礙程度。
如今，網頁無障礙在許多國家已成為法律層面的要求（例如日本自 2024 年 4 月起施行的《殘疾人歧視消除法》修訂案，規定企業必須提供合理便利），檢查對比度已經成為企業建設網站時不可迴避的基本質量檢查項之一。