Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
颜色对比度检查 - WCAG标准无障碍设计工具
一款免费的在线颜色对比度检查工具。支持WCAG 2.1标准，检查前景色和背景色的对比度是否符合无障碍设计要求。纯本地计算，数据隐私绝对安全。
前景色 (文字颜色)
背景色
实时预览
21.00:1
对比度比值
WCAG AA
通过（需要 ≥ 4.5:1）
WCAG AAA
通过（需要 ≥ 7:1）
颜色调整建议
亮化前景色
#262626
对比度: 15.13:1
#4d4d4d
对比度: 8.45:1
#737373
对比度: 4.74:1
#999999
对比度: 2.85:1
深化前景色
#000000
对比度: 21.00:1
#000000
对比度: 21.00:1
#000000
对比度: 21.00:1
#000000
对比度: 21.00:1
# 什么是颜色对比度？
颜色对比度是衡量文本与背景之间颜色差异程度的指标，通常以比例值表示（如 4.5:1）。 良好的对比度对于确保内容可读性至关重要，特别是对于视力障碍用户。
WCAG（Web内容无障碍指南）制定了国际公认的对比度标准，帮助开发者创建无障碍的网页设计。
# WCAG 标准要求
WCAG AA 级别
- • 普通文本：至少 4.5:1
- • 大文本（18pt+或14pt粗体）：至少 3:1
- • 非文本元素：至少 3:1
- • 这是合规的最低要求
WCAG AAA 级别
- • 普通文本：至少 7:1
- • 大文本（18pt+或14pt粗体）：至少 4.5:1
- • 提供更好的可读性
- • 建议用于重要内容
# 对比度计算方法
对比度使用以下公式计算：
(L1 + 0.05) / (L2 + 0.05) 其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。 相对亮度定义为 0（纯黑）到 1（纯白）之间的值。
# 最佳实践建议
- 优先使用文本对比度：确保主要文本内容达到 AA 标准
- 考虑大文本例外：大字体可以使用较低的对比度
- 避免仅依赖颜色：不要仅用颜色传达信息
- 测试不同场景：考虑不同的显示设备和环境光条件
- 提供高对比模式：为用户提供切换高对比度的选项
# 常见颜色组合
黑白经典
21.0:1
深灰白底
12.6:1
白底深蓝
8.6:1
白底绿色
7.4:1
黄底黑色
13.4:1
深蓝浅蓝
14.8:1
紫色黄底
13.8:1
橙色白底
5.3:1