網頁色彩無障礙設計指南

如何確保你的網站色彩符合 WCAG 無障礙標準？了解 AA/AAA 對比度要求、色盲考量、實用檢查工具。

為什麼色彩無障礙很重要？

全球約 8% 的男性和 0.5% 的女性有某種程度的色覺異常。加上老花、低視力等狀況，確保色彩對比度足夠是基本的設計責任。

WCAG（Web Content Accessibility Guidelines）定義了明確的對比度標準。

等級	一般文字	大文字（≥18px 粗體或 ≥24px）
AA	≥ 4.5:1	≥ 3:1
AAA	≥ 7:1	≥ 4.5:1

AA：最低合規標準，大多數法規要求

AAA：最高標準，適合政府網站和醫療應用

淺灰文字配白色背景（如 #999 on #FFF = 2.85:1 ❌）

紅色文字配綠色背景（色盲用戶幾乎無法閱讀）

彩色背景上的白色小字（通常對比度不足）

不要只靠顏色傳達資訊：錯誤提示除了紅色，加上 ❌ 圖示或文字

提供足夠的對比度：用工具檢查每一組前景/背景色

測試色盲模擬：確認在 Protanopia（紅色盲）和 Deuteranopia（綠色盲）下仍可使用

避免純色彩區分：圖表使用紋理或標籤輔助

在色碼轉換器的「WCAG 對比度檢查」區塊，可以即時查看任何色碼在白底和黑底上的 AA/AAA 合規狀態。每個色碼頁面都自動顯示。