🔍 WCAG对比度检查器
免费在线WCAG对比度检查器，检测文字与背景色的对比度是否符合WCAG 2.1 AA/AAA标准。支持实时预览、色盲模拟、一键调色。无需注册。
零依赖·可离线使用🎨 颜色选择
📊 对比度结果
示例文字 Preview
小号文字 small text · 14px
大号文字 Large Text · 24px
👁️ 色盲模拟
色盲模拟预览
📖 WCAG对比度检查器能做什么？
WCAG对比度检查器是一个无障碍设计工具，帮助设计师和开发者检测文字与背景色之间的对比度是否符合WCAG 2.1标准。支持AA和AAA两个合规级别、大号/普通文字分类、色盲模拟预览，以及一键自动修正功能。
核心功能
- 实时对比度计算：输入颜色即时计算对比度比值
- 四级合规检测：AA普通/大号、AAA普通/大号
- 色盲模拟：红/绿/蓝色盲和全色盲模拟
- 自动修正：一键调整颜色使其符合AA标准
- 实时预览：正常视觉和色盲模拟预览
使用教程
- 选择前景色（文字颜色）和背景色
- 查看对比度比值和各级别合规状态
- 如果不合规，点击"自动修正"一键调整
- 使用色盲模拟查看色盲用户的视觉体验
- 复制合规的颜色值用于项目
应用场景
场景1：UI设计
确保界面文字对所有用户可读，符合无障碍法规要求。
场景2：网站审计
检查现有网站的颜色方案是否满足WCAG标准，发现无障碍问题。
场景3：品牌设计
在品牌色确定后，验证文字颜色搭配是否合规，避免后期返工。
扩展知识
WCAG（Web Content Accessibility Guidelines）是W3C制定的网页内容无障碍指南。对比度要求（1.4.3和1.4.6条款）是其重要组成部分。相对亮度计算基于sRGB色彩空间，权重为R:0.2126、G:0.7152、B:0.0722，反映了人眼对绿色最敏感的生理特性。欧洲EN 301 549法规和美国Section 508均引用WCAG标准。
📖 常见问题
什么是WCAG对比度？
WCAG对比度是指前景色（文字）与背景色之间的亮度差异比值。WCAG 2.1标准要求：普通文字（AA级）对比度至少4.5:1，大号文字（AA级）至少3:1，普通文字（AAA级）至少7:1，大号文字（AAA级）至少4.5:1。对比度不足会导致部分用户（如低视力、色盲）难以阅读内容。
AA和AAA标准有什么区别？
AA是WCAG的基本合规级别，要求普通文字对比度至少4.5:1；AAA是最高级别，要求普通文字至少7:1。大多数网站以AA为目标，政府和无障碍要求严格的网站需要达到AAA。大号文字（18px粗体或24px以上）的对比度要求较低。
如何提高对比度？
提高对比度的方法：1) 使用更深的文字颜色或更浅的背景色（浅色模式）；2) 使用更浅的文字颜色或更深的背景色（深色模式）；3) 避免使用相近色相的前景和背景；4) 使用本工具的一键调色功能，自动调整到符合标准的颜色。
色盲用户看颜色有什么不同？
最常见的色盲类型是红绿色盲（约占男性8%），患者难以区分红色和绿色。蓝色色盲较少见。全色盲极为罕见。色盲用户主要依赖亮度和饱和度来区分颜色，因此高对比度对色盲用户尤为重要。本工具提供色盲模拟功能，帮助您了解色盲用户看到的颜色。
对比度的计算公式是什么？
WCAG对比度比值的计算公式：(L1 + 0.05) / (L2 + 0.05)，其中L1是较亮色的相对亮度，L2是较暗色的相对亮度。相对亮度的计算：先将sRGB值转换为0-1范围，然后对每个通道进行线性化，最后按0.2126R + 0.7152G + 0.0722B加权求和。