高對比模式預覽

計算前景背景對比度，檢查是否符合 WCAG 無障礙標準。給設計師、內容創作者、低視力朋友使用。

前景顏色背景顏色文字大小（px，選填）

預覽文字 Sample Text

🔒 這個工具純前端、完全離線、不上傳。你的資料只留在你的瀏覽器，不會傳到任何伺服器。

📖 對比度背後的知識

對比度是「前景和背景的亮度差」。WCAG 國際標準規定：一般文字 AA 要 4.5:1，AAA 要 7:1；大字（18pt 或 14pt 粗體以上）AA 只要 3:1。為什麼要管？因為全球有 2.53 億人低視力、3 億人色盲，對比度不足，他們看不清楚。這不只是「少數人」的問題，是強光下、老花眼、手機螢幕髒了都會遇到的問題。

台灣也有「網站無障礙規範」，政府網站必須符合 AA 等級。做網站的人，對比度是基本功，不是選配。這個工具幫你算，不用背公式。

⚠️ 常見誤解

❌「顏色好看就好，對比度不重要」 → 對比度不足，部分使用者根本看不清楚。好看和可讀要兼顧。

❌「黑底白字一定對比最高」 → 不一定。純黑 #000 配純白 #FFF 對比 21:1，但有些情境灰底白字更舒服。

❌「色盲只要看對比度就好」 → 色盲是「顏色辨識」問題，不是對比度。紅綠色盲看紅綠燈會混淆，要靠形狀、位置輔助。

❌「對比度是設計師的事」 → 內容創作者也要注意。發文、做簡報、寫 email，對比度不夠，讀者就看不到。

❌「這個工具會幫我改顏色」 → 不會。它只算對比度、告訴你等級，顏色要自己調。

🩺 使用時機與注意事項

✅ 適合：網站設計師、UI/UX、內容創作者、政府/學校網站、想檢查無障礙的人。
⚠️ 注意：這個工具算的是「單色對比」，漸層、圖片背景請取最差的一段算。實際無障礙還要考慮字級、字型、行距。

❓ 更多常見問題

WCAG 是什麼？

Web Content Accessibility Guidelines，國際無障礙網頁標準，目前版本 2.1（2.2 已發布）。

AA 和 AAA 差在哪？

AA 是基本（4.5:1），AAA 是最高（7:1）。政府網站通常要求 AA。

大字為什麼標準比較低？

大字比較容易辨識，所以 3:1 就夠。一般文字筆畫細，要 4.5:1。

色盲有幾種？

紅綠色盲（最常見）、藍黃色盲、全色盲。紅綠色盲占男性 8%。

對比度夠就好嗎？

不夠。還要考慮字級、字型、行距、點擊區域大小。對比度是「必要條件」，不是「充分條件」。

常見問題

對比度怎麼算？

用 WCAG 公式：先算前景和背景的相對亮度，再算比值 (L1+0.05)/(L2+0.05)。

什麼是 AA 和 AAA？

WCAG 對比標準。AA 是基本（4.5:1），AAA 是最高（7:1）。大字（18pt+）AA 只要 3:1。

為什麼要管對比度？

對比度不足，低視力、色盲、強光下的人看不清楚。無障礙設計的基本要求。

資料會上傳嗎？

不會，全部在瀏覽器。

可以預覽嗎？

可以，下方有預覽區，會即時顯示前景背景的效果。

適合誰用？

網站設計師、UI/UX、想檢查自己網站無障礙的人、低視力朋友。

色盲可以看嗎？

色盲不是對比度問題，是顏色辨識。這個工具是對比度，不是色盲模擬。

有標準可查嗎？

WCAG 2.1 是國際標準，台灣也有「網站無障礙規範」。

可以算漸層嗎？

目前只算單色對比，漸層請取最差的一段算。

可以列印嗎？

可以，按瀏覽器列印。