正在準備工作區…

輸入

正在準備工作區…

輸出

結果將顯示在這裡。

使用方法

前景色在一種背景上可能清晰，在另一種背景上卻難以辨認。此工具比較兩種顏色，並分別檢查普通文字、大文字和介面圖形的要求。

預覽提供視覺參考，通過與否依據計算出的對比度判斷。仍需在最終介面中評估字級、字重及周圍設計。

先將 sRGB 通道線性化，計算相對亮度。對比度等於較亮顏色的亮度加 0.05，再除以較暗顏色的亮度加 0.05。

黑字白底範例的對比度為 21:1。交換前景色和背景色不會改變比值，但會改變視覺效果。

範例

輸入

#000000 on #ffffff

結果

21.00:1 · AA and AAA pass

黑字白底達到 WCAG 對比度最大值 21:1。

普通文字 AA 和 AAA 門檻分別為 4.5:1 和 7:1；大文字分別為 3:1 和 4.5:1。適用的介面圖形檢查門檻為 3:1。

顯示值保留兩位小數，但通過與否使用未捨入的數值判斷。不接受透明顏色，因為最終顏色取決於下方背景。

結合實際字級、字重和元件狀態使用對比度結果。配色通過檢查，並不代表已評估焦點可見性、鍵盤操作、有效標籤或頁面其他部分。

處理限制

文字輸入上限 1 MiB。CSS 與 HTML 轉換在工作執行緒中執行，限時 30 秒。顏色工具使用 sRGB；產生的樣式僅供預覽，需要在您的版面配置中測試。

為什麼顯示的對比度達到門檻，卻仍未通過？

兩位小數的顯示值可能向上捨入。判斷使用完整計算值，因此略低於門檻的數值仍不會通過。

可以輸入透明顏色嗎？

不可以。請先將顏色與相關背景合成，再輸入最終的不透明顏色。

交換顏色會改變對比度嗎？

不會。亮度比值是對稱的。「交換顏色」僅改變預覽，便於比較兩種視覺效果。

達到 AA 代表整頁都無障礙嗎？

不代表。工具僅按顯示的門檻檢查目前配色。適用的文字或元件標準，以及其他無障礙要求，仍需分別審查。

可以儲存對比度結果嗎？

使用「複製」複製顯示的對比度。工具不會產生無障礙報告，也不會為頁面提供認證。