開發者工具

色彩對比檢查

依無障礙標準,檢查文字是否真的清晰易讀。

色彩對比檢查 在您的裝置上執行
  • 在您的瀏覽器中執行 — 您的文字絕不會傳送到任何地方
  • 免註冊、無額度限制,可隨您高興使用多少次

運作方式

白底淺灰字是網路上最常見的無障礙失誤,而且完全可以避免。無障礙準則將對比度定義為精確的比值,因此一組配色是否通過,是算術問題,而不是意見問題。

比值如何計算

每種顏色的相對亮度依準則規定的方式計算,也就是逐通道套用 gamma 校正,再取較亮與較暗者之間的比值。結果與無障礙稽核所回報的一致,因為使用的是同一個公式。

門檻

一般文字在 AA 需要 4.5:1,在 AAA 需要 7:1。大型文字(大約 24px,粗體則為 18.7px)在 AA 只需要 3:1,在 AAA 需要 4.5:1。介面元件與有意義的圖形需要 3:1。大多數組織與大多數法規要求的是 AA。

為什麼大型文字允許較低的對比

較大的字形,其每一筆畫由更多像素構成,因此在較低對比下仍能保持易讀。這就是標題可以使用比內文更淺的灰色的原因。

比值無法涵蓋什麼

它無法說明色盲(那是另一項獨立的檢查),也無法說明文字是否夠大、字體是否易讀。通過比值只是底線,並不證明設計易於閱讀。

常見問題

色彩對比檢查:常見問題

我需要多少對比度?

AA 等級的一般文字需 4.5:1,大型文字需 3:1。AAA 等級則提高到 7:1 與 4.5:1。

什麼算大型文字?

大約 24px 以上,若為粗體則為 18.7px 以上。

通過就代表我的設計具備無障礙性嗎?

不。對比度只是眾多要求之一;它無法說明色盲、文字大小或易讀性。