Design
Color Contrast Checker
Calculate the WCAG contrast ratio and show AA/AAA text plus AA graphics and UI results.
Color contrast checker
Check two HEX colors against WCAG AA and AAA contrast levels.
- 1Input
- 2Run
- 3Result
Processed on this device
Result
Your result will appear here.
Examples
- #000000 / #FFFFFF → 21:1
- #777777 / #FFFFFF → about 4.48:1
Accuracy & limitations
- It primarily calculates solid foreground/background contrast; images, gradients, and alpha compositing are limited.
- Conformance also depends on font size, weight, interactive states, and the real usage context.
Frequently asked questions
What is the difference between AA and AAA?
AAA requires higher contrast. The tool reports separate outcomes for normal and large text.
Does a passing color pair make my whole site accessible?
No. Contrast is one requirement; keyboard access, labels, structure, and other criteria still need review.
What does graphics/UI AA check?
It checks whether meaningful icons and boundaries such as form controls reach at least 3:1 against adjacent colors.