WCAG 对比度检查器和模拟器

tools.accessibility-contrast-simulator.meta_desc

实时预览

无障碍设计至关重要

这是一个示例文段，用于演示您选择的颜色搭配效果。良好的对比度能确保所有人顺畅阅读。

了解更多 WCAG 标准

Select a simulation mode below to apply filters to the live preview area.

正常视觉

红色盲 (Protanopia)

绿色盲 (Deuteranopia)

蓝色盲 (Tritanopia)

全色盲 (Achromatopsia)

低视力 (模糊)

强光环境 (低对比度)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

前景色 (文本)

背景色

普通文本

21.00:1

AAA

大文本

AAA

UI 组件

AAA

无障碍对比度模拟器常见问题 (FAQ)

对比度模拟器.

WCAG 对比度是衡量两种相邻颜色之间感知亮度（明暗）差异的数学测量值，它以介于 1:1 至 21:1 之间的一个数字来表述。它是确保网页文字和交互控件能够从背景中足够清晰地凸显出来，且能被世界上不同视力健康层次的用户顺畅阅读的核心指标。

要是为了满足基础合规（WCAG AA），常规的普通文本需要保证有至少 4.5:1 的差距比，而大字号文本（通常是18pt或者14pt同时加粗的情况下）甚至图形 UI 模块需要达到 3.0:1 的比值。如果是极为严苛追求极致无障碍表现的 AAA 等级，普通字则要求 7.0:1，大字号要求 4.5:1 才能过关。

是的！在控制面板中只要切到“视觉模拟”板块，您就可以在网页端激活实时渲染的 SVG 颜色校正过滤器（SVG Matrix Filters），精准倒推出包含了红色盲（Protanopia）、绿色盲（Deuteranopia）、蓝色盲（Tritanopia）、全色盲（Achromatopsia Monochromacy）乃至视线模糊发憷和刺眼曝光效果的残酷仿真画面！

绝无可能。作为顶尖且严肃的开发者用具（PRO Simulator），它的整套骨架完全是依附 JavaScript 在您本地的浏览器渲染树上发力的（100% Client-side）。所有关于十六进制混色加减或是画面帧过滤加工等，均在您个人的物理机内完成封闭闭环。我们不要您的隐私。

当然可以，如果您的心仪底色撞了 WCAG 测试红灯失败，那您只需激活我们的“自动修复核心 (Auto-Fix feature)”。算法会接管剩余烦恼，迅速下达运算命令通过比对最近色彩光谱，建议出一个离你最初设想色差不大的平替版安全颜色，保证您的牌子调性跟冰冷的合规审查同时圆满！

如何使用对比度检查器

设置前景色和背景色
使用颜色选择器或直接输入HEX、RGB或HSL值，设置文本颜色（前景色）和背景色。对比度值将即时更新。
查看您的WCAG结果
该工具显示对比度（例如5.2:1），并标注是否符合WCAG AA标准（常规文本为4.5:1）及AAA标准（7:1）。大号文本（18pt+）的阈值要求较低。
模拟色盲
切换至模拟器选项卡，预览您的配色方案在第二色盲、第一色盲、第三色盲或其他视觉类型用户眼中呈现的效果。
如有需要，请使用自动修复功能
若颜色失效，请点击自动修复。该工具将计算最接近的AA或AAA标准色调，同时尽可能保留原有的色相和饱和度。

对比度参考值

WCAG 2.1 不同文本类别的最低对比度要求：

内容类型	WCAG AA	WCAG AAA	示例比例
普通文本（<18pt）	4.5:1 ✓	7:1 ✓	#000 on #fff → 21:1
大号文本（≥18pt 粗体）	3:1 ✓	4.5:1 ✓	#333 配 #fff → 12.6:1
UI组件与图标	3:1 ✓	不适用	#767676 配 #fff → 4.5:1
装饰元素	无要求	无要求	背景图像豁免

常见使用场景

用户界面/视觉设计评审

在将设计系统移交开发前，请测试所有文字与背景的组合方案，及早发现问题。

无障碍审计

为客户无障碍报告及WCAG 2.1/2.2合规认证提供经文档记录的对比度比率。

色盲检测

模拟8%男性用户对配色方案的体验，确保色盲用户不会遗漏关键信息。

法律合规

在产品上市或公开招标前，满足ADA（美国）、EAA（欧盟）及EN 301 549数字无障碍要求。

开发者质量保证

在代码审查过程中快速验证CSS颜色变量的对比度，无需切换至设计工具。

工作原理

所有计算均在您的浏览器中运行，采用WCAG 2.1亮度计算公式——无需服务器交互。

相对亮度

WCAG将亮度定义为线性化RGB通道的加权和：L = 0.2126R + 0.7152G + 0.0722B。对比度则为(L1 + 0.05) / (L2 + 0.05)，其中L1为较浅的颜色。

色盲模拟

该模拟器采用标准达尔顿化矩阵（Machado等人，2009）将sRGB值转换为各类色觉缺陷人群所感知的效果。

自动修复算法

自动修复功能在HSL空间中遍历明度通道，寻找在保持色相和饱和度不变的前提下，能达到目标比例（AA或AAA）的最小调整值。

本工具适用于哪些人群

UI/UX设计师

在设计移交前测试配色方案，并保持设计系统的合规性。

无障碍专家

为WCAG审核、客户报告和合规认证提供对比证据。

前端开发工程师

在开发和代码审查过程中，无需离开浏览器即可快速检查CSS颜色变量。

产品经理

确保在产品发布或公开招标提交前符合法律无障碍要求（ADA、EAA）。

内容创作者

请确认叠加在图片或彩色背景上的文字对所有受众群体均清晰可读。

提升无障碍设计的实用技巧

始终以WCAG AA（4.5:1）作为基准目标，并力争实现AAA（7:1）标准——尤其在医疗、政府及金融类网站的主体文本中。
运行所有8种色盲类型的模拟，而不仅限于红绿色盲。每种类型对不同颜色组合的影响各不相同。
切勿仅依靠颜色来传达信息——务必将颜色提示与图标、图案或文本标签结合使用。
使用HSL调整对比度：增加前景与背景之间的明度差异，而非改变色相。
在强光下于实体移动设备上进行测试——真实环境条件会暴露显示器无法呈现的对比度问题。

为什么可访问性对比度至关重要

约每12名男性中就有1人，每200名女性中就有1人存在某种形式的色觉缺陷——对比度不足会直接将这些用户排除在外。
美国《美国残疾人法案》（ADA）和欧盟《2025年欧洲无障碍法案》要求面向公众的数字产品必须符合WCAG 2.1 AA级无障碍标准。
低对比度是全球无障碍审计中最常见的三大WCAG违规问题之一（WebAIM百万报告）。
无障碍色彩设计提升所有用户的可读性——无论在强光下、低质量显示屏上，还是随着用户年龄增长。

性能与隐私

每次对比度计算、色盲模拟和自动修复操作均通过JavaScript在浏览器内完成。任何颜色值、屏幕截图或使用数据均不会传输至服务器。该工具每次计算响应时间低于5毫秒，首次加载页面后即可离线使用。

教育说明：WCAG与色觉障碍

WCAG 2.1 与 2.2 对比

WCAG 2.2（2023年版）引入了新的成功标准（2.4.11 焦点外观、3.2.6 统一帮助），但核心对比度要求（1.4.3、1.4.6）与2.1版保持一致。

亮度与明度

WCAG采用相对亮度——一种感知加权的测量标准。亮黄色（#ffff00）具有极高的亮度（0.93），而深藏青色（#003366）则具有较低的亮度（0.02），两者形成9.8:1的对比度比率。

色盲的类型

红绿色盲（最常见）影响约6%的男性。红盲症约占2%。蓝黄色盲约占0.01%。全色盲约占0.003%。

APCA——未来标准

为WCAG 3.0标准提出的高级感知对比算法（APCA）。该算法根据字体大小、粗细及极性差异化评估对比度——敬请关注后续进展。

故障排除

是的。WCAG AA级是多数司法管辖区法定要求的最低标准。AAA级属于理想目标，并非所有文字/背景组合都能实现。在正文文本中尽可能追求AAA级标准。

大号文本（18pt常规字体或14pt粗体）的阈值较低（AA级要求3:1）。若小号文本在4.5:1比例下未达标，请通过加深文字或淡化背景直至满足比例要求。

尝试仅调整背景色而非文字颜色。将白色背景稍作加深（例如改为浅灰色），即可在视觉变化极小的情况下实现AA标准合规。

工具对浮点亮度值的舍入方式可能产生细微差异。两者结果应保持在±0.1范围内——为确保符合要求，请采用更保守（较低）的数值。

你知道吗？

WCAG对比度比率公式最初于WCAG 1.0（1999年）中作为简单的亮度差异检测引入。在WCAG 2.0（2008年）中，该公式经过重大修订，改用基于CIE 1931色彩空间及人类视觉系统光处理机制的相对亮度模型。当前采用的4.5:1阈值，是基于该数值可近似补偿视力20/80（无辅助技术支持的低视力）用户所经历的3:1对比度损失而确定的。

打造人人都能使用的产品

可访问性色彩对比度不仅是合规性检查项，更是惠及所有用户的基础设计品质。这款免费工具集实时WCAG检测、色盲模拟与智能自动修复于一体，所有数据均在浏览器内处理。立即测试您的配色方案，修复不符合标准之处，打造真正普适的产品。