根據 WCAG 2.1 標準計算任意前景色與背景色的對比度，即時預覽 AA/AAA 結果並匯出可存取配色。
工具功能
- 即時顏色選擇: 使用 Ant Design 顏色選擇器調整前景色和背景色，或輸入精確的 HEX 值。
- WCAG 矩陣: 在單個表格中查看普通文字、大文字和 UI 圖形的 AA/AAA 要求。
- 精確亮度: 對比度比率遵循 WCAG 2.1，使用線性化 RGB 通道，並包含每種顏色的亮度讀數。
- 預覽區塊: 在即時範例卡片中使用您選擇的配色方案測試標題和段落。
使用方法
- 選擇顏色: 為前景色和背景色選擇或貼上 HEX 值。
- 查看比率: 檢查計算的對比度比率和 AA/AAA 表格，了解通過/失敗情況。
- 調整文案: 編輯範例文字以預覽真實標籤、按鈕或行銷文案。
生成原理
相對亮度
每個 RGB 通道在使用係數 0.2126、0.7152 和 0.0722 計算亮度之前，使用 WCAG 伽馬曲線轉換為線性值。
對比度比率
比率公式 (L1 + 0.05) / (L2 + 0.05) 比較較亮和較暗的顏色，確保跨裝置的一致可讀性。
閾值
AA 普通文字需要 ≥ 4.5:1，大文字 ≥ 3:1，AAA 普通需要 7:1，AAA 大文字 4.5:1，圖形物件應滿足 3:1。
常見問題
- 大文字是否使用不同的閾值？
- 是的。≥ 18px 常規或 14px 粗體的文字符合大文字標準，AA 只需要 3:1，AAA 只需要 4.5:1。
- 如何測試漸層？
- 檢查漸層中最亮和最暗的停止點。每個停止點對都應滿足所需的比率。
- 圖示是否算作文字？
- 實心圖示和基本 UI 圖形應相對於其背景至少滿足 3:1 對比度。
相關文件
- WCAG 2.1 對比度（成功標準 1.4.3） - 關於文字和文字圖像的最小對比度等級的官方指導。
- WCAG 2.1 對比度（1.4.6） - AAA 一致性的增強對比度要求。
- MDN - 計算亮度 - 關於無障礙工具中使用的線性 RGB 公式的背景。
- W3C - 對比度比率數學 - 關於比率公式、四捨五入和理由的詳細資訊。
- 包容性設計卡片 - 為不同受眾配對顏色和排版的提示。