無障礙工具

Color Contrast 對比度檢查

依據 WCAG 2.1 標準,即時檢測前景色與背景色的對比度。 確保您的設計符合 AA / AAA 無障礙規範。

前景色(文字顏色)
HEX
RGB
HSL
背景色
HEX
RGB
HSL
快速選色
即時預覽

這是預覽標題

這是一般文字內容的預覽範例。WCAG 2.1 建議一般文字至少需要 4.5:1 的對比度,大型文字(18pt 以上或 14pt 粗體以上)則至少需要 3:1 的對比度。

T
卡片標題
卡片描述文字範例
對比度 (Contrast Ratio)
前景 / 背景
7.23 : 1
WCAG 評級
AA
WCAG 2.1 符合性評估
AA 一般文字 通過
需 ≥ 4.5 : 1
AAA 一般文字 通過
需 ≥ 7.0 : 1
AA 大型文字 通過
需 ≥ 3.0 : 1
AAA 大型文字 通過
需 ≥ 4.5 : 1
無障礙改善建議
當前配色符合 WCAG 規範,無需改善。
廣告
Google AdSense 廣告區塊

什麼是 Color Contrast Checker?

Color Contrast Checker(色彩對比度檢查工具)是一款專為網頁設計師、前端開發者與無障礙專家打造的免費線上工具。它能快速計算兩種顏色之間的對比度,並依據 WCAG 2.1(Web Content Accessibility Guidelines)標準評估是否符合 AA 與 AAA 無障礙規範。

什麼是 WCAG 對比度?

WCAG 2.1 定義了色彩對比度的計算方式,透過相對亮度(Relative Luminance)公式來計算前景色與背景色的對比比值。對比度越高,文字越容易閱讀,特別是對於視力較弱的使用者。

為什麼對比度很重要?

良好的色彩對比度不僅能提升所有使用者的閱讀體驗,更是無障礙網頁設計的關鍵要素。全球約有 2.17 億人有中度至重度視力障礙,確保足夠的對比度可以讓您的網站更具包容性,同時也能避免潛在的法律風險。

如何使用此工具?

使用方式非常簡單:在左側分別設定前景色(文字顏色)背景色,您可以透過顏色選擇器、直接輸入 HEX、RGB 或 HSL 值來調整顏色。右側會立即顯示即時預覽、對比度數值與 WCAG 評估結果。如果配色未通過標準,我們也會提供具體的改善建議。

對比度的計算方式

對比度是根據 WCAG 2.1 規範的相對亮度公式計算:L = 0.2126 × R + 0.7152 × G + 0.0722 × B,其中 R、G、B 為經過 Gamma 校正的 sRGB 值。對比度比值 = (L₁ + 0.05) / (L₂ + 0.05),其中 L₁ 為較亮的顏色,L₂ 為較暗的顏色。

常見問題 (FAQ)

什麼是 WCAG?
WCAG(Web Content Accessibility Guidelines)是 W3C 制定的網頁內容無障礙指南,提供了一系列讓身心障礙者更容易使用網頁內容的建議標準。目前主流版本為 WCAG 2.1,涵蓋了對比度、導航、語義等多個面向。
AA 和 AAA 有什麼區別?
AA 是基本無障礙標準,多數國家和組織的法律要求(如 ADA、Section 508)至少達到 AA 等級。AAA 則是更高級的無障礙標準,要求更嚴格的對比度門檻(一般文字 ≥ 7:1),並非所有網站都能在整個網站中達到 AAA,但應盡可能朝此目標努力。
什麼是「大型文字」?
根據 WCAG 定義,大型文字是指「18pt(約 24px)以上」或「14pt(約 18.67px)粗體以上」的文字。由於大型文字面積較大,閱讀門檻較低,因此對比度要求相對寬鬆(AA 只需 ≥ 3:1)。
這個工具是否支援 Color Blind 模擬?
目前這個版本的 Color Contrast Checker 主要專注於對比度計算與 WCAG 評估。未來更新將考慮加入色盲模擬功能,協助設計者建立對所有使用者都友好的配色方案。
如何改善色彩對比度?
若對比度不足,建議:① 加深文字的顏色(如從淺灰改為深灰或黑色);② 調亮背景色(如從深色改為淺色);③ 增加文字的字重(bold)或字級(font-size);④ 避免在背景上使用過於複雜的漸層或圖案。本工具的改善建議區會根據您的配色提供具體建議。
對比度越高越好嗎?
一般來說,較高的對比度確實能提升可讀性,但過高的對比度(如純黑 #000 配純白 #FFF,對比度 21:1)在長時間閱讀下可能會造成眼睛疲勞。對大多數內容來說 7:1 到 15:1 之間的對比度是最舒適的範圍。
這個工具會保存我的資料嗎?
完全不會!所有顏色計算都在您的瀏覽器中進行,您的任何操作資料都不會傳送到任何伺服器。此工具不需要網路連線即可運作(除了首次載入資源外),您可以完全離線使用。

瀏覽器相容性

本工具使用標準 Web API(HTML5、CSS3、ES6+),支援所有現代瀏覽器:

🌐
Chrome
最新版
🦊
Firefox
最新版
🍏
Safari
最新版
🔷
Edge
最新版

隱私說明

此工具完全在您的瀏覽器中執行。您輸入的任何顏色都不會傳送到任何伺服器。我們不會對這個工具使用 Cookie 或追蹤功能。