颜色对比度检查器

检查前景色与背景色的对比度是否满足 WCAG 标准

前景色 (文字)

背景色

预览效果

大标题文字

普通正文内容，演示实际显示效果

较小文字，用于次要信息展示。确保在不同背景色下都能清晰可读。

对比度结果

21.00:1

WCAG AA (普通文字)

需要 ≥ 4.5:1

通过

WCAG AA (大文字)

需要 ≥ 3:1

通过

WCAG AAA (普通文字)

需要 ≥ 7:1

通过

WCAG AAA (大文字)

需要 ≥ 4.5:1

通过

CSS 变量

/* 前景色和背景色 */
--foreground: #000000;
--background: #ffffff;

/* 使用方式 */
.element {
  color: var(--foreground);
  background-color: var(--background);
}

/* Tailwind 配置 */
colors: {
  foreground: '#000000',
  background: '#ffffff',
}