免费对比度检查器

检查文本和背景颜色的对比度是否符合WCAG 2.1无障碍标准。

94,217+ contrast checks performed

Contrast Ratio

17.06:1

Large Text Preview (24px)

Normal body text preview (16px). The quick brown fox jumps over the lazy dog. This sample shows how your color combination looks at typical body copy size.

Small text (14px) — often used for captions, footnotes, and metadata.

Reversed: background on text color (17.06:1 — same ratio)

AA Normal Text

Requires 4.5:1

PASS

AA Large Text

Requires 3:1

PASS

AAA Normal Text

Requires 7:1

PASS

AAA Large Text

Requires 4.5:1

PASS

Ready to build an accessible website with these colors?

Build with these colors

什么是对比度检查器？

对比度检查器计算文本颜色和背景颜色之间的对比度。足够的颜色对比度对于确保所有用户（包括视觉障碍者）能够阅读内容至关重要。

WCAG要求普通文本至少4.5:1、大文本至少3:1的对比度。本工具即时计算对比度并显示AA/AAA合规状态。

WCAG Contrast Levels Explained

AA Normal Text

4.5:1 minimum

Requires a minimum contrast ratio of 4.5:1. This is the most common compliance target and applies to body text under 18pt (or 14pt bold).

AA Large Text

3:1 minimum

Requires a minimum contrast ratio of 3:1. Applies to text that is at least 18pt (24px) or 14pt bold (18.66px bold).

AAA Normal Text

7:1 minimum

The highest standard, requiring 7:1 contrast ratio. Ensures readability for users with moderately low vision (approximately 20/80).

AAA Large Text

4.5:1 minimum

Requires 4.5:1 for large text at the AAA level. Provides enhanced readability for headers and display text.

对比度建议

1

Start with contrast

浅灰色背景有时比纯白更护眼。

2

Don't rely on color alone

浅色模式对比度好不代表暗色模式也好。两者都要测试。

3

Test on real devices

为色盲用户同时使用图标、下划线、粗体等。

4

Use dark mode too

If your site supports dark mode, verify contrast ratios for both themes. A color pair that passes in light mode may fail in dark mode.

5

Mind the font weight

Thin and light font weights reduce perceived contrast. If you use weights below 400, aim for a higher contrast ratio than the minimum.

6

Check interactive states

Hover, focus, and active states often use different colors. Make sure all interactive states meet contrast requirements, not just the default.

对比度检查器：Kleap vs 替代方案

功能KleapWebAIMCoolorsAdobe Color
价格完全免费免费免费/付费Free (with Adobe account)
Real-time PreviewYes, live text on backgroundYes, basicYesYes
Nearest Accessible ColorYes, auto-suggestedNoNoPartial
WCAG级别AA和AAAAA和AAA仅AAAA + AAA
网站构建器内置AI构建器无无No
Swap Colors ButtonYesNoNoNo
Random Accessible PairYesNoNoNo

常见问题

好的对比度是多少？+
WCAG AA要求普通文本4.5:1以上，大文本3:1以上。AAA要求普通文本7:1以上。
大文本的标准是什么？+
18pt（24px）以上或14pt（18.66px）以上的粗体文本。
为什么对比度重要？+
确保所有用户都能阅读内容，且许多地区法律要求无障碍合规。
对色盲有帮助吗？+
足够的对比度对色盲用户也有帮助。
AA和AAA有什么区别？+
AA是最低推荐标准，AAA是更严格的增强标准。大多数网站应达到AA。
Is WCAG AA enough for my website?+
WCAG AA is the standard referenced by most accessibility laws worldwide, including the ADA (US), EAA (EU), and EN 301 549 (Europe). For most websites and apps, AA compliance is both legally sufficient and provides good readability. AAA is recommended for government sites, healthcare, and education, but is not typically required by law.
What if my brand colors fail contrast?+
You have several options: slightly adjust the shade of your brand color (often a small lightness change is enough), use your brand color for decorative elements only and a high-contrast color for text, increase font size to qualify for the large text threshold, or add a semi-transparent overlay behind text placed on colored backgrounds. Our tool suggests the nearest accessible color automatically.
Does contrast matter for dark mode?+
Absolutely. The same WCAG contrast requirements apply regardless of the color scheme. In fact, dark mode introduces unique challenges: pure white (#FFFFFF) text on a very dark background can cause halation (a glowing effect) for users with astigmatism. A slightly off-white (#E0E0E0 to #F0F0F0) on a dark gray (#1A1A1A to #2D2D2D) often provides better readability while still meeting AA standards.
Can colorblind users see enough contrast?+
High contrast ratios help colorblind users significantly, but contrast alone is not sufficient. WCAG also requires that color is not the sole means of conveying information (1.4.1). For example, don't use only red/green to indicate error/success — add icons or text labels. The contrast ratio formula accounts for luminance, not hue, so it helps across all types of color blindness.
How do I test contrast in my existing website?+
You can use browser DevTools (Chrome's Lighthouse audit includes contrast checks), browser extensions like axe or WAVE, or paste your exact HEX/RGB values into this tool. For comprehensive testing, use automated tools like Lighthouse for a full-page scan, then manually verify any flagged elements. Remember to test hover states, focus styles, and placeholder text — these are commonly missed.

构建无障碍网站

Kleap的AI构建器创建注重无障碍的专业网站。

免费开始构建

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

免费对比度检查器 | WCAG无障碍测试 | Kleap