對比度檢查工具(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 以上

使用小貼士

  • 文字顏色和背景顏色既可以通過取色器選擇,也可以直接輸入十六進位制顏色程式碼(支援 `#RRGGBB` 和 `#RGB` 兩種格式)。
  • 點選「交換顏色」按鈕可以快速交換文字色與背景色進行對比,在比較多套 Logo 或圖示配色方案時非常方便。
  • AAA 標準比 AA 標準更嚴格。一般網站建議至少達到 AA 標準,但對可讀性要求特別高的內容,建議以 AAA 標準為目標。
  • 按鈕邊框、圖示等「UI 元件與圖形物件」的對比度要求(3:1 以上)是 WCAG 2.1 新增的成功標準(1.4.11)。

常見問題

WCAG(Web Content Accessibility Guidelines)是一套國際性指南,旨在讓更多人能夠順暢地訪問網頁內容。對比度是用 1:1(無差異)到 21:1(黑白之間的最大差異)之間的數值,來表示文字顏色與背景顏色在明暗上的差異,常被用作衡量文字在視覺障礙人士、老年使用者、以及在室外強光下使用手機等各種條件下可讀性的客觀指標。

文字越大,形狀越容易辨認,因此即使對比度稍低也仍然易讀。WCAG 將 18pt(約 24px)以上的常規字型,或 14pt(約 18.66px)以上的粗體字,定義為「大號文本」,並對其採用比正常文本更寬鬆的標準(AA 標準下 3:1 以上)。

WCAG 2.1 的 AA 標準是許多國家和地區的法律法規或指南(例如美國的 ADA、歐盟的 Web Accessibility Directive 等)所參照的最低達標要求。AAA 標準要求更高,並非強制性的,但在對可讀性要求特別高的內容(如公共機構網站)中有時會被推薦採用。

WCAG 2.x 首先會從每種顏色的 sRGB 值中去除伽馬校正,計算出「相對亮度(relative luminance)」。然後將較亮顏色的亮度記為 L1,較暗顏色的亮度記為 L2,按照 (L1+0.05)/(L2+0.05) 的公式計算出對比度。該計算方法作為 W3C 的技術規範公開發布。
ツールくん

閒話 ― 無障礙標準誕生的背景

WCAG(Web Content Accessibility Guidelines)是由 W3C(World Wide Web Consortium,全球資訊網聯盟)主導制定的國際性指南,其最初版本 WCAG 1.0 釋出於 1999 年。早在當時,減少視覺障礙使用者藉助螢幕閱讀器等輔助技術使用網頁時所遇到的障礙,就已被視為一項重要課題。

對比度標準之所以受到重視,與人類視覺的多樣性密切相關:一定比例的人群存在色覺異常(色弱),例如男性中約每 20 人就有 1 人;隨著年齡增長,晶狀體發黃會導致對比敏感度下降;此外,在室外強烈日光下手機螢幕也會變得難以看清。設定數值化的標準,使設計師不必僅憑主觀的「是否好看」來判斷,而能夠客觀地驗證內容的無障礙程度。

如今,網頁無障礙在許多國家已成為法律層面的要求(例如日本自 2024 年 4 月起施行的《殘疾人歧視消除法》修訂案,規定企業必須提供合理便利),檢查對比度已經成為企業建設網站時不可迴避的基本質量檢查項之一。