Free design tool
Color Contrast Checker
Compare two colors, get the contrast ratio, and quickly check whether the combination reaches common WCAG accessibility levels.
Contrast ratio
16.06:1
AA normal text
✓ Pass
AA large text
✓ Pass
AAA normal text
✓ Pass
PixelDojo preview
Contrast is hierarchy too.
Test real combinations before using them for text, controls, and essential content.
How to read the result
A higher ratio means greater luminance separation between the colors. For normal text, 4.5:1 is a common AA threshold; large text uses 3:1. AAA requires stronger contrast.
Don't design only to pass
The ratio is an important check, but context, type size, font weight, interaction states, and real viewing conditions also affect readability.
Learn the principle behind the number
Contrast, hierarchy, and perception work together.