WCAG颜色对比度检测工具。输入前景色和背景色，计算对比度比率，检查是否符合WCAG 2.1 AA/AAA无障碍标准。支持十六进制、RGB、HSL和常见颜色名称输入。纯前端本地运算。
WCAG 2.1 · AA/AAA · 纯前端🎨 前景色
🎨 背景色
21.00:1
对比度比率
AA 普通文本: ✓
AAA 普通文本: ✓
AA 大文本: ✓
AAA 大文本/UI: ✓
| 标准 | 级别 | 最低对比度 | 说明 | 状态 |
|---|
📝 文本示例预览
示例标题文字
这是一段正文示例文本。WCAG AA标准要求普通文本的对比度至少为4.5:1，大文本（18px加粗或24px以上）为3:1。
小号辅助文字示例（小于18px）
关于WCAG色彩对比度
Web内容无障碍指南（WCAG）2.1定义了颜色对比度的最低标准，确保视力障碍用户（包括色盲、低视力用户）能够清晰阅读内容。
对比度等级说明
- AA级（最低要求）：普通文本 ≥ 4.5:1，大文本 ≥ 3:1，UI组件 ≥ 3:1
- AAA级（增强要求）：普通文本 ≥ 7:1，大文本 ≥ 4.5:1
使用建议
设计时建议先确保AA合规（法律最低要求），尽可能达到AAA标准。深色模式设计中尤其注意浅色文字在深色背景上的对比度。建议使用本工具在设计过程中持续验证色彩搭配。
❓ 常见问题
什么是对比度比率？
对比度比率是两种颜色的相对亮度差异比值，范围从1:1（完全相同）到21:1（纯黑对纯白）。WCAG使用相对亮度（sRGB色彩空间中的亮度定义）计算比率。
如何定义"大文本"？
根据WCAG标准，大文本指至少18pt（约24px）加粗或至少24pt（约32px）的文本。大文本因为字号较大，对对比度的要求较宽松。
UI组件也需要满足对比度吗？
是的。WCAG 2.1 AA要求UI组件（按钮边框、表单控件、图标等）与相邻颜色的对比度至少为3:1。
支持哪些颜色格式？
支持HEX（#RRGGBB、#RGB）、RGB/RGBA、HSL/HSLA格式，以及常见颜色名称（如red、blue、white、black、transparent等）。注意透明色会被视为黑色处理。
对比度不足怎么办？
加深前景色或减淡背景色可以提高对比度。使用颜色选择器调整颜色，本工具会实时更新对比度结果。建议深色文字配浅色背景，或浅色文字配深色背景。