Contrast Checker
Free contrast checker: enter a foreground and background colour to compute the WCAG 2.1 ratio, see AA/AAA pass or fail, and preview real text.
The quick brown fox jumps over the lazy dog · 示例正文 16px
示例大字号 24px Bold
How to Use
- Set the foreground
Enter the text colour HEX, or use the picker to sample it from your design.
- Set the background
Enter the background HEX; use Swap to compare the inverted pairing quickly.
- Read the four verdicts
The result shows the ratio and AA/AAA outcomes, with a real-size text preview below.
FAQ
What contrast ratio does WCAG require?
Level AA requires 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold and above). Level AAA requires 7:1 for body text and 4.5:1 for large text.
Why does my palette keep failing?
The usual culprits are light grey text on white, or using a brand colour directly as the text colour. Darkening the text one step or lightening the background usually clears the bar.
Are large text and body text judged the same?
No. Text at 18pt (24px) or 14pt bold (18.66px) and above counts as large, with a lower bar — 3:1 is enough for AA.
Does passing contrast mean accessible?
No. Accessibility also covers font size, line spacing, visible focus and screen-reader semantics. Contrast is simply the most basic and most measurable piece.