WCAG colour contrast checker

检查你的颜色是否清晰易读且无障碍.

测试前景色和背景色，预览结果，检查 WCAG AA 和 AAA，并复制干净的 HEX 值或 CSS 变量。

Foreground text HEX

背景 HEX

清晰可读的颜色很重要。

This sample updates as you change the foreground and background colours.

对比度 ratio

21.00

通过

AA normal text · 4.5:1

通过

AA large text · 3:1

通过

AAA normal text · 7:1

通过

AAA large text · 4.5:1

使用 this in CSS, a design system, or a quick accessibility note.

:root {
  --contrast-text: #111827;
  --contrast-background: #FFFFFF;
}

Start from a real 个配色 or a safe high-contrast pairing, then adjust it for your project.

The higher the ratio, the easier the combination is to read for more people and more display conditions.

AA normal text

使用 at least 4.5:1 for body copy, navigation, links, buttons and most interface text.

AA large text

Large text can pass at 3:1, but higher contrast usually still feels clearer and more professional.

AAA text

7:1 is the stronger target for long reading, critical information, accessibility-first products and dashboards.