線上顏色對比度計算工具
「色彩對比度檢查工具」能幫你即時進行顏色對比度計算，自動判斷文字與背景色是否符合 WCAG 2.1 規範。不論是輸入 Hex 色碼或使用裝置選色器，工具都會同步顯示 AA 與 AAA 在一般文字與大文字下的四項評估結果。所有運算皆直接在你的瀏覽器中完成，完全無須傳送資料至伺服器或註冊帳號。
如何進行線上顏色對比度計算
要在線上檢測文字與背景色的對比效果，只需要簡單幾個步驟：
- 在文字色或背景色的輸入框中，輸入 3 位或 6 位的 Hex 色碼（例如
#767676或FFFFFF）。 - 或者點擊色塊，開啟裝置內建的選色器直接挑選色彩。
- 系統會即時更新對比值、文字預覽與無障礙評估標籤。若想測試兩種顏色互換的效果，點擊 對調顏色 按鈕即可瞬間切換。
理解 WCAG 2.1 AA 與 AAA 門檻要求
WCAG 2.1 針對網頁無障礙設定了兩種規範等級，且針對一般文字與大文字有不同的門檻值要求：
- AA 級規範：一般內文的顏色對比度至少需達到 4.5:1；大文字（18pt/24px 常規體，或 14pt/18.66px 粗體以上）至少需達到 3.0:1。
- AAA 級規範：標準更為嚴格，一般內文至少需達到 7.0:1，大文字則至少需要 4.5:1。
此工具會同時顯示四項門檻的測試結果，若符合標準便會標示為 通過。
支援 Hex 色碼輸入與自動格式過濾
在 UI 設計交接或撰寫 CSS 樣式表時，你可以直接複製並貼上色碼。輸入框支援標準的十六進位字元（0–9 與 A–F），並會自動忽略掉開頭的 # 符號或無效字元。
當輸入的色碼格式正確時，評估標籤便會立刻更新。你也可以隨時在手動輸入與點選選色器之間自由切換，兩者會保持同步更新。
為什麼顏色對比度對無障礙與閱讀體驗至關重要
文字與背景色之間的對比不足，是網頁設計中最常見也最容易修正的問題之一。對比度過低會讓低視能、色弱使用者或在室外強光下觀看手機螢幕的人難以閱讀。
在設計初期就進行顏色對比度驗證，能大幅降低後續無障礙稽核退件或重新修改設計的成本。
常見問題
WCAG AA 級要求的最低顏色對比度是多少？
WCAG 2.1 AA 級規範要求一般內文的顏色對比度至少需達到 4.5:1，大文字（18pt 或 14pt 粗體以上）至少需達到 3.0:1。這款工具會同時顯示 AA 與 AAA 的四項標準門檻評估。
網頁內文的顏色對比度要多少才算看得清楚？
一般網頁內文建議達到 4.5:1 以上的對比度，這也是 WCAG AA 級的基本要求。若要獲得更佳的清晰度與閱讀體驗，特別是照顧低視能使用者，建議提升至 7.0:1 以上以達到 AAA 級標準。
可以直接貼上帶有 # 號的 Hex 色碼來計算嗎？
可以。你可以在前景或背景輸入框中直接貼上 3 位或 6 位的 Hex 色碼，工具會自動忽略開頭的 # 符號與無效字元，並在色碼有效時即時完成顏色對比度計算。
這款顏色對比度計算工具是免費的嗎？需要註冊帳號嗎？
這款工具完全免費，無須註冊帳號，也沒有任何使用次數限制。所有計算都在你的瀏覽器中透過 W3C 相對亮度公式執行，不會傳送任何資料至伺服器。
大文字與一般內文的對比度標準有什麼差別？
大文字（如 18pt/24px 常規體或 14pt/18.66px 粗體以上）因為字型較大且筆劃較粗，在較低的對比度下仍可辨識，因此 AA 級門檻降為 3.0:1；而一般內文則需要至少 4.5:1。
可以用選色器挑選顏色嗎？
可以。點擊輸入框旁邊的色塊，即可開啟你裝置內建的選色器自由挑選顏色，輸入框與預覽畫面會同步即時更新。
什麼是 WCAG AAA 級對比度？
AAA 級是 WCAG 2.1 中最高等級的對比度規範。一般內文要求達到 7.0:1 以上，大文字則需達到 4.5:1 以上，適用於要求極高可讀性的網頁設計與服務。
要在哪裡測試兩色反轉後的對比度？
點擊工具上的「對調顏色」按鈕，就能立刻將文字色與背景色互換，無須重新輸入色碼即可觀察對調後的對比度與「通過」標籤變化。
