色彩對比度檢查器

色彩對比度檢查器是什麼？

色彩對比度檢查器是一款根據WCAG（網頁內容可及性指南）標準，即時分析前景色與背景色對比度的線上工具。輸入顏色後可立即確認對比度，並直觀地查看AA和AAA等級的達成與否。

在臺灣，根據「無障礙網頁開發規範」，公共機構網站必須符合可及性標準。本工具可輕鬆驗證網站或應用程式的顏色組合是否符合無障礙標準，對設計師、開發人員和內容創作者都非常有幫助。

適用場景

• 網頁設計 – 在選擇網站文字和背景顏色時驗證WCAG達成情況
• 行動應用程式開發 – 確保應用程式UI的可讀性和可及性
• 文件製作 – 選擇PDF、簡報等文件中視認性高的顏色組合
• 品牌設計 – 建立品牌識別時選擇可及性高的標準色彩
• 無障礙稽核 – 現有網站或應用程式的色彩可及性評估
• 教育資料製作 – 製作所有學生都易於閱讀的教育資料

主要功能

• 即時對比度計算 – 變更顏色時即時計算並顯示對比度，無需額外操作
• 多種顏色輸入方式 – 支援顏色選擇器、HEX代碼直接輸入、RGB值單獨輸入等多種方式
• WCAG達成情況視覺化 – 一目了然地查看AA/AAA一般文字和大型文字4項標準的達成與否
• 即時預覽 – 直接確認套用所選顏色的文字實際外觀
• 色盲模擬 – 模擬紅色盲、綠色盲、藍色盲、全色盲等色覺障礙視角下的顏色呈現
• 顏色交換功能 – 一鍵交換前景色和背景色
• 隨機顏色生成 – 自動生成隨機顏色以發現各種顏色組合

使用方法

1. 選擇前景色 – 使用顏色選擇器選擇文字顏色，或直接輸入HEX代碼（如#000000）或RGB值
2. 選擇背景色 – 使用相同方式選擇背景顏色。預設為白色(#FFFFFF)
3. 確認結果 – 即時顯示對比度和WCAG各等級達成情況
4. 確認預覽 – 在預覽區確認實際文字呈現效果。分別顯示一般大小、大型文字、粗體文字
5. 色盲模擬 – 在下方色盲模擬區確認各類色覺障礙視角下的顏色呈現

WCAG對比度標準詳解

AA等級（最低標準）

AA等級是所有網頁內容都應達到的最低標準。在臺灣的無障礙網頁開發規範中也採用此標準。

• 一般文字: 至少需要4.5:1的對比度。適用於18px以下的文字
• 大型文字: 至少需要3:1的對比度。適用於18px以上粗體或24px以上的文字

AAA等級（強化標準）

AAA等級是追求更高可及性的強化標準。針對視力障礙用戶或特定環境（如強光下）推薦達成。

• 一般文字: 至少需要7:1的對比度
• 大型文字: 至少需要4.5:1的對比度

對比度計算原理

對比度是基於兩種顏色的相對亮度計算得出。亮度(Luminance)透過將RGB值進行伽瑪校正後加權平均計算得出。計算公式為 (L1 + 0.05) / (L2 + 0.05)，其中L1為較亮顏色的亮度，L2為較暗顏色的亮度。

色盲類型說明

紅色盲（第1型色覺）

因紅色感光細胞異常導致難以區分紅色與綠色的狀態。約佔男性人口的1%，主要將紅色感知為暗黃色或褐色。紅綠色之間的區分特別困難，因此交通號誌識別等方面可能存在困難。

綠色盲（第2型色覺）

因綠色感光細胞異常導致綠色感知困難的狀態。是最常見的色盲類型，約佔男性人口的5%。與紅色盲類似難以區分紅綠色，但對藍色和黃色的感知相對正常。

藍色盲（第3型色覺）

因藍色感光細胞異常導致藍色和黃色區分困難的狀態。較為罕見，發生率不分男女約為0.01%。主要難以區分藍色與綠色，以及黃色與粉色。

全色盲（單色覺）

完全無法感知顏色，僅能看見黑白畫面的狀態。非常罕見，發生率約為十萬分之一。因只能依靠亮度區分物體，所以對比度對全色盲者的可及性尤為重要。

無障礙設計秘訣

• 不要只靠顏色傳達資訊 – 重要資訊除了顏色外，也應以文字、圖示、圖案等方式傳達。例如錯誤訊息除了紅色外，也應附上錯誤圖示
• 連結要能識別 – 連結應使用與周圍文字不同的顏色或添加底線。對比度建議3:1以上
• 善用留白 – 充足的留白和行距可提升可讀性。即使對比度不高，適當的間距也能提高視認性
• 提供深色模式 – 深色模式能減輕眼睛疲勞，對畏光或視力障礙用戶更友善。但深色背景的對比度標準相同
• 在各種環境下測試 – 在強光、低亮度、各種螢幕等多種環境下確認對比度是否充足

常見問題