色彩對比檢查工具:檢視 WCAG 對比率

輸入兩種顏色,輸出比例,以及WCAG 分別評分的每個尺寸的判決。當一對失敗時,它會找到最接近的顏色,而不會改變您的色調,因此修復仍停留在品牌上。較新的 APCA 模型位於旁邊,明確標示為尚未成為標準。

對比度—
APCA—
使用地點NeedsAAAAA

大文字,24 畫素以上

正文採用正常大小,大多數頁面實際上必須透過這種情況。

該比率實際衡量的是什麼

每種顏色都會轉換為相對亮度 - 撤銷 sRGB 伽馬曲線後其紅色、綠色和藍色通道的加權和,其中綠色加權最大,因為我們的眼睛對它最敏感。 The ratio is the lighter luminance plus a small constant over the darker one plus the same constant.這個常數可以阻止比例在純黑色中跑到無窮大,這也是為什麼該公式比大多數人的眼睛更適合黑暗背景。

為什麼一對會得到多個判決

WCAG does not grade a colour pair once.大文字允許比正文文字更低的欄,因為尺寸完成了對比度必須做的一些工作,並且介面元件(核取方塊邊框、聚焦環)再次單獨分級。 A palette that fails for body copy can be perfectly correct for a heading, so the table gives every case rather than a single pass or fail.

修復時保持色調

對於失敗的一雙鞋,通常的解決辦法是選擇深灰色,它會悄悄地耗盡品牌的色彩。這裡的建議僅以清除閾值的最小步驟移動亮度,並將色調和飽和度保留在您放置的位置。它是相同的顏色,只是足夠遠以便可讀。

關於 APCA 編號

APCA 是為下一版本指南開發的對比模型。它考慮了 WCAG 2 比例無法做到的事情——極性、字型粗細、深色背景上感知對比度下降的方式——而且它通常符合您的眼睛,而舊公式則不符合。之所以在這裡顯示它,是因為它確實提供了豐富的資訊,而且它的標籤很清楚,因為它不是您的衡量標準。今天的一致性是比率,而不是 Lc。

常見問題解答

什麼算大文字?

18 點,約 24 畫素,或 14 點粗體,約 18.66 畫素粗體。下面是普通文字,需要更高的比例。

我的灰色在白色上透過,但在黑色上失敗。為什麼?

WCAG 2 公式並不像感知那麼對稱。深色背景上的淺色文字對於眼睛的對比度低於該比率所顯示的對比度,這正是 APCA 旨在彌補的差距之一。如果這對顏色只是剛剛消失,請相信你的眼睛,再新增一點。

該比例是否適用於圖示和邊框?

是的,在非文字對比規則下,比例為 3:1。這涵蓋了使用它時需要看到的控制項部分 - 欄位輪廓、切換按鈕、焦點指示器 - 但不包括裝飾圖形或標誌。

我在這裡輸入的內容會傳送到任何地方嗎?

不會。顏色永遠不會離開頁面,並且不會上傳或儲存任何內容。

由 GO AI 團隊建構。 OKLCH轉換器 · 我們的無障礙宣告 · 所有免費工具