CONTRAST CHECK
Contrast checker, more accessible palettes.
Enter foreground and background colors, compute the WCAG contrast ratio, and check AA / AAA for normal and large text, with a live sample. Runs locally.
14.33 : 1
Normal text AA (≥4.5)
Pass
Normal text AAA (≥7)
Pass
Large text AA (≥3)
Pass
Large text AAA (≥4.5)
Pass
Aa 示例文字 Sample Text
How is contrast computed?
WCAG uses relative luminance: (L1+0.05)/(L2+0.05). Normal text needs ≥4.5 (AA), ≥7 (AAA); large text (≥18pt or 14pt bold) needs ≥3 (AA), ≥4.5 (AAA).
示例与注意事项Example & notes
一个例子A worked example
把正文色 #8B98AD 与背景 #080D1D 放进去，得到对比度约 6.1:1，满足 WCAG AA 的正文要求。Feed in text #8B98AD on background #080D1D: the ratio is about 6.1:1, which passes WCAG AA for body text.
注意事项Things to watch
- AA 正文要求 4.5:1，大字号可放宽到 3:1；AAA 要求 7:1。AA asks 4.5:1 for body text (3:1 for large text); AAA asks 7:1.
- 两种颜色越接近，比值越接近 1:1；纯黑配纯白是理论最大值 21:1。The closer the two colours, the closer the ratio is to 1:1 — black on white is the theoretical maximum of 21:1.
- 比值不是越高越好：深色主题下超过 15:1 的全白文字反而刺眼，可适当降低亮度。Higher is not always better: pure white on dark can glare above 15:1, so tune the lightness down.
相关问答More Q&A
为什么黑白比值正好是 21:1？Why is black-on-white exactly 21:1?
这是 WCAG 对比度公式推导出的理论上限：(1.05) / (0.05) = 21。It is the theoretical ceiling of the WCAG formula: (1.05) / (0.05) = 21.
能一次检查整套配色吗？Can I check a whole palette?
可逐组检查常用搭配；页面还提供明度扫描，直接给出达标区间与建议明度。Check pairs one by one; the page also sweeps lightness to show the passing range and a suggested value.