AnyTools
🌓
顏色對比度計算器
根據 WCAG 2.1 標準計算任意前景色與背景色的對比度，即時預覽 AA/AAA 結果並匯出可存取配色。
顏色輸入
前景色
背景色
預覽
範例文字
預覽標題無障礙介面將充滿活力的品牌顏色與足夠的對比度配對，以保持文案可讀。
對比度結果
對比度比率
19.79:1
相對亮度
前景色0.003
背景色1.000
| 標準 | 要求 | 狀態 | 備註 |
|---|---|---|---|
| AA – 普通文字 | 4.5:1 | 通過 | 正文 ≥ 4.5:1 |
| AAA – 普通文字 | 7.0:1 | 通過 | 高重要性文案 ≥ 7:1 |
| AA – 大文字 | 3.0:1 | 通過 | 文字 ≥ 18pt 常規或 14pt 粗體 ≥ 3:1 |
| AAA – 大文字 | 4.5:1 | 通過 | 大文字 ≥ 4.5:1 |
| UI 圖形/圖示 | 3.0:1 | 通過 | 基本圖示和視覺狀態 ≥ 3:1 |
設計指導
使用比率表作為護欄，迭代直到每個狀態達到目標水平。
- 在照片上放置文字時新增透明度或疊加層以保持對比度。
- 將 AAA 保留用於關鍵任務文案；AA 是大多數儀表板的優秀預設值。
- 在設計系統中記錄批准的顏色對，以便開發人員重用合規的調色盤。
❓什麼是顏色對比度測試
顏色對比度測試透過測量前景色和背景色亮度之間的差異來確保文字或圖示保持清晰可讀，這是 WCAG 和大多數品牌指南的關鍵要求。
✨功能特點
🎨
即時顏色選擇
使用 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。
❓
Frequently Asked Questions
❓
大文字是否使用不同的閾值？
是的。≥ 18px 常規或 14px 粗體的文字符合大文字標準，AA 只需要 3:1，AAA 只需要 4.5:1。
💬
如何測試漸層？
檢查漸層中最亮和最暗的停止點。每個停止點對都應滿足所需的比率。
🔍
圖示是否算作文字？
實心圖示和基本 UI 圖形應相對於其背景至少滿足 3:1 對比度。
💡How To & Tips
🧭
從品牌調色盤開始
快速交換顏色以測試同一基礎調色盤的淺色和深色主題。
🪄
小步迭代
微調 HEX 值或使用顏色選擇器滑桿，查看小調整如何影響合規性。
📝
預覽內容
將真實的 UI 文案貼上到預覽區塊中，以評估層次結構和重點。
🔗Related Documents
📝更新日誌
📌v1.0.251117v1.0.0初始版本，包含 WCAG 表格、亮度讀數和即時預覽卡片。(2025年11月17日)
📦推薦元件
User Comments
Loading...