颜色对比度检测 WCAG
根据WCAG 2.1/2.2标准AA/AAA级别检查文本与背景颜色对比度。色盲变体的视觉模拟。
Color Contrast Checker
Contrast Ratio
Live Preview
This is normal body text for previewing contrast. The quick brown fox jumps over the lazy dog. 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
This is smaller text (14px). Lorem ipsum dolor sit amet, consectetur adipiscing elit.
What is 颜色对比度检测 WCAG?
颜色对比度检测器根据W3C发布的Web内容可访问性指南（WCAG 2.1和2.2）标准，评估前景文本颜色和背景颜色之间的亮度对比度比率。不足的颜色对比度是网络上排名第一的可访问性失败— 估计8%的男性和0.5%的女性患有某种形式的色觉缺陷（色盲），低对比度文本对于视力低下的用户在明亮的户外屏幕上或投影时是不可读的。WCAG定义了两个合规级别：AA要求普通文本4.5:1的对比度，大文本（18pt+或14pt+粗体）3:1；AAA要求分别为7:1和4.5:1。本检测器使用WCAG亮度公式计算精确比率，清晰显示AA普通、AA大、AAA普通和AAA大阈值的PASS/FAIL指示，提供背景上示例文本的实时视觉预览，并包括色盲模拟过滤器（Protanopia、Deuteranopia、Tritanopia、全色盲），展示每种CVD类型的用户如何感知颜色组合。使用自动调整功能稍微移动任一颜色的色相、饱和度、亮度，直到通过WCAG AA— 在保持您的设计意图的同时满足可访问性要求。
When to Use 颜色对比度检测 WCAG
用于为UI设计选择文本/背景颜色对、审计现有网站的可访问性合规性、设计带文本叠加的营销横幅，或确保深色模式主题对满足WCAG。
How to Use 颜色对比度检测 WCAG
通过选择器或HEX/RGB输入前景文本颜色和背景颜色。查看计算的对比度比率和WCAG 2.1 AA/AAA通过/失败状态。切换色盲预览。使用自动调整实现合规。