WCAG 颜色对比度检查器

根据 WCAG 2.1 指南评估文本和背景颜色的对比度。即时生成可访问的颜色调整。

HEX/RGB/HSL
HEX/RGB/HSL
所有操作都在你的浏览器本地运行。

实时文本预览

大标题（18pt 粗体 / 24pt 常规）

这是大标题文本样式的预览。

普通文本（小于 18pt）

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel massa lectus. 和其他人一起去看。

对比度

18.6:1

WCAG 2.1 合规状态

WCAG AA 要求
普通文本 (4.5:1) PASS
大文本 (3.0:1) PASS
WCAG AAA 要求
普通文本 (7.0:1) PASS
大文本 (4.5:1) PASS

WCAG 2.1 指南

轻松验证对比度标准，以构建符合 Section 508、ADA 和 WCAG AA 或 AAA 指南的无障碍界面。

建议引擎

沿 HSL 坐标自动增量调整颜色，以发现通过对比度标准的最近替代方案。

完全客户端

计算在您的浏览器环境中本地执行。不会向我们的服务器传输任何颜色、文件或遥测坐标。

相关颜色工具

HEX RGB HSL 颜色转换器
转换颜色并调整亮度坐标。
图像取色器
从设计模型中提取调色板。
CSS 颜色转换器
在 CMYK、HSV、RGB、HSL 和 HEX 格式之间转换。

颜色对比度检查器

WCAG对前面和背景颜色的对比比例计算,并显示常见的文本大小结果。

输入
两个有效的CSS颜色和可选预览文本.
输出
与 WCAG AA 和 AAA 通过或失败指标的对比比例.
真正的限制
计算仅覆盖光明对比,它不证实字体传输、动作、焦点或非色彩的界面或账户。
隐私与数据处理
两个有效的 CSS 颜色和可选预览文本在此浏览器表中进行处理. Converter 不收到或存储; 关闭或重新加载页面清除工作状态,除非工具明确提供本地下载。

如何使用此工具

  1. 在工具控制中提供两个有效的CSS颜色和可选预览文本。
  2. 选择与 WCAG AA 和 AAA 通行或失败指标的对比比例影响的设置,然后运行工具。
  3. 查看与 WCAG AA 和 AAA 通行或错误指标的对比比例,在复制或下载之前。

常见的失败模式

缺陷的颜色不能被测量,没有解决背景的透明度可以使比例毫无意义。

有用的例子

比较#f2937在#ffffff上进行对比,以便对正常和大文本的比例进行评估。