🛠️ 瀏覽器工具

顏色對比度檢查器

檢查顏色對比度比率以符合網路無障礙規範。根據 WCAG 指南測試文字和背景顏色組合,提供即時預覽、無障礙評級和改進建議。

正在載入工具...

相關工具

顏色 Tools

View All →

如何檢查顏色對比度

1

選擇文字顏色

點擊第一個選色器以選擇文字顏色,或直接輸入十六進制代碼。

2

選擇背景顏色

使用第二個選色器選擇用於對比度測試的背景顏色。

3

檢視對比度結果

檢查計算出的對比度比率,並查看一般和大型文字的 AA/AAA 評級。

4

預覽您的設計

查看即時預覽,了解您的顏色組合在實際文字內容中的顯示效果。

主要功能

即時對比測試

當您選擇不同的文字和背景顏色組合時,即時計算對比度比率。

WCAG 符合性評級

根據網頁內容無障礙指南,取得一般文字和大型文字的 AA 和 AAA 評級。

即時預覽面板

查看您的顏色組合在一般和大型字體下的實際顯示效果。

視覺分數指示器

透過直觀的圓形圖表,查看您的對比度表現,分數範圍從 0 到 100。

互動式選色器

透過內建的文字和背景選色工具輕鬆選擇顏色。

無障礙提示

取得提高對比度並符合無障礙標準的實用建議。

什麼是顏色對比度檢查器?

顏色對比度檢查器是一種測量文字和背景顏色之間亮度差異的工具。它根據 WCAG(網頁內容無障礙指南)標準計算對比度比率,以確保內容對於視力受損(包括色盲和低視力)的用戶可讀。

為何使用我們的顏色對比度檢查器?

1

WCAG 符合性

透過精確的 AA 和 AAA 評級,確保您的設計符合國際無障礙標準。

2

即時回饋

調整顏色時立即看到結果,讓您輕鬆找到符合標準的組合。

3

視覺評分系統

透過我們直觀的 0-100 評分系統,一目了然地了解對比度表現。

4

無需安裝

在瀏覽器中即時測試顏色組合,無需下載任何軟體。

常見問題

什麼是好的對比度比率?

對於一般文字,AA 標準至少應達到 4.5:1 的對比度,而 AAA 則為 7:1。大型文字(18pt 或 14pt 粗體)AA 標準需要 3:1,AAA 則需要 4.5:1 的對比度。

AA 和 AAA 評級代表什麼?

AA 是大多數法規要求的標準無障礙符合性等級。AAA 則是最高等級,為視力嚴重受損的用戶提供更強化的無障礙支援。

對比度比率如何計算?

對比度比率是根據 WCAG 指南定義的顏色相對亮度計算的。其範圍從 1:1(無對比)到 21:1(最大對比)。

什麼情況下算作大型文字?

大型文字定義為 18 點 (24px) 或更大,或 14 點 (18.66px) 或更大(如果為粗體)。大型文字的對比度要求較為寬鬆。

為何顏色對比度很重要?

良好的顏色對比度確保所有人都能閱讀內容,包括視力受損、色盲的用戶,以及在強烈陽光下或在劣質顯示器上觀看內容的用戶。

我可以使用此工具檢查任何顏色格式嗎?

本工具接受十六進制顏色代碼。您可以使用線上轉換器或設計工具將其他格式(RGB、HSL 等)轉換為十六進制。

顏色對比度檢查器