颜色对比度检测

按 WCAG 对比度规则检查文字和背景颜色。

在您的浏览器中运行。您的文件不会离开设备。 了解如何验证

…

使用方法

  1. 1
    填写各项

    输入数字或选择所需选项。

  2. 2
    查看结果

    更改任何值时,答案会立即更新。

  3. 3
    使用结果

    复制结果或记下来。不会向任何地方发送任何内容。

About this tool

Enter a text colour and a background colour as hex codes. You see the contrast ratio and whether it passes the WCAG 2 levels: AA needs 4.5 to 1 for normal text and 3 to 1 for large text, AAA needs 7 to 1 and 4.5 to 1. Good contrast helps everyone, especially people with low vision.

When to use it

Check text and background colours against WCAG contrast rules.

Tips

Aim for 4.5:1 for normal text and 3:1 for large text.

Privacy

Everything runs in your browser, so your data is not uploaded or stored.

计算示例

With the boxes at their starting values (Text colour (hex): #1f2937; Background colour (hex): #ffffff), the tool shows: AA, normal text (4.5 : 1): Pass; AA, large text (3 : 1): Pass; AAA, normal text (7 : 1): Pass; AAA, large text (4.5 : 1): Pass; Interface parts and icons (3 : 1): Pass; Contrast ratio: 14.68 : 1. Change any box to see your own numbers. The result updates as you type, and nothing leaves your browser.

获得最佳结果的提示

在相信结果之前先检查每一个输入项,因为一个错误的数字就会改变整个答案。请使用工资单、账单、证书或合同上的准确数字,并记下计算日期。税率、门槛和规则会不时变化,因此对于税费和法律事务,请将结果视为估算,并与本页注明的官方来源核对。您可以尝试任意多个方案;不会保存或发送任何内容,刷新页面会清空输入。

要点

将此计算器嵌入您的网站

复制此代码,即可在您的页面上显示计算器。包含指向 shobfree.com 的链接。

常见问题

What counts as large text?

About 24 px, or 18.7 px in bold, and above.

Which level should I aim for?

AA is the common legal and practical target for websites.

What does AA mean?

The common WCAG level for contrast.

What ratio is needed?

4.5 to 1 for normal text.

完全免费无费用,无需注册
文件保持私密一切都在您的浏览器中运行
用您的语言轻松使用提供多种语言