Make every word easier to read.
Check a pair of colors against WCAG 2 text-contrast thresholds. Preview normal and large text, swap colors and copy the CSS.
Two colors. A clearer answer.
Accepts solid sRGB colors in #RGB or #RRGGBB format. Transparent colors, gradients and images need a separate check.
Contrast check
Good design should be easy to read.
Good design should be easy to read.
Pass/fail uses the full, unrounded WCAG 2 contrast ratio. Large text means at least 24 CSS px regular or approximately 18.67 CSS px bold. This checks color contrast, not full accessibility compliance.
From input to done.
- Enter two hex colors or choose them with the color pickers.
- Read the contrast ratio and AA / AAA results for text.
- Adjust the colors, preview your copy and copy the CSS.
A few useful answers.
What does AA require for normal text?
The WCAG 2 minimum contrast threshold is 4.5:1 for normal text and 3:1 for large text. The tool compares the unrounded ratio.
What counts as large text?
At least 24 CSS pixels for regular text, or approximately 18.67 CSS pixels when bold.
Does swapping colors change the score?
No. The contrast ratio is symmetric. Swapping helps you preview the reversed design.