颜色对比检查器

根据 WCAG AA 和 AAA 检查前景/背景对比度。选择颜色时查看比例更新。

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

根据 WCAG AA 和 AAA 指南检查前景/背景对比度。
在您的浏览器中运行
免费使用

使用方法

选择文本（前景）和背景颜色。
读取对比度和 AA/AAA 结果。
调整直至通过目标水平。

How this tool works

选择文本（前景）和背景颜色。
读取对比度和 AA/AAA 结果。
调整直至通过目标水平。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

如有需要，请使用颜色对比度检查器：根据 WCAG AA 和 AAA 指南检查前景/背景对比度。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。