分類
查看所有工具
🛠️ 瀏覽器工具

顏色對比度檢查器

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

顏色對比檢查器

自信地建立無障礙的顏色組合

#000000
#f0f4f8

預覽

一般文字

This is an example of normal body text that would appear on your website or application.

大字體文字

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

對比比例

19.00:1

0

分數

一般文字

AAA

大字體文字

AAA

WCAG 2.1 指南：AA要求一般文字4.5:1，大字體文字3:1。AAA要求一般文字7:1，大字體文字4.5:1。

提示與建議

  • ✦Maintain a contrast ratio of at least 4.5:1 for normal text.
  • ✦Use 3:1 or higher for large text (18pt or 14pt bold).
  • ✦Consider using darker text on lighter backgrounds or vice versa.
  • ✦For full WCAG AAA compliance, aim for a ratio of 7:1.
  • ✦Adjust brightness or saturation slightly to improve contrast.

相關工具

顏色 Tools

View All →

免費 HSV 轉 Pantone 顏色轉換器

立即將 HSV（色相、飽和度、明度）顏色轉換為最接近的 Pantone 配對色。使用我們全面的顏色匹配工具，透過視覺比較和精準的色彩科學，找到完美的 Pantone 顏色。

免費Hex轉Pantone顏色轉換器

使用我們免費的線上工具將Hex顏色轉換為最接近的Pantone配色。具備精確的Delta E色彩匹配功能，可瀏覽40多種常用Pantone顏色，並即時比較顏色。非常適合設計師、印刷業者和色彩專業人士。

免費漸變色調色盤生成器

免費線上建立令人驚豔的漸變色並生成自訂色彩調色盤。選擇起始和結束顏色，調整調色盤大小，並複製 CSS 程式碼或單獨的十六進位顏色代碼。非常適用於網頁設計、平面設計和創意專案。

免費線上 CSS 漸層產生器

使用我們易於使用的漸層產生器，創造令人驚豔的 CSS 線性與放射狀漸層。輕鬆選擇顏色、方向，並即時複製 CSS 程式碼用於您的網頁專案。

免費線上調色盤產生器

使用我們免費的線上調色盤產生器，創造令人驚豔的色彩組合。運用色彩理論原則建立和諧的色彩方案，或從圖片中提取顏色。支援匯出至 CSS、SCSS、Tailwind、JSON、PDF 和 PNG 等格式。

圖片選色器線上工具

免費線上從任何圖片中提取顏色。上傳圖片，點擊選擇顏色，並取得 HEX、RGB、HSL 和 CMYK 值。建立並匯出色彩調色盤。

如何檢查顏色對比度

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 等）轉換為十六進制。