Contrast Checker
Check the WCAG 2.1 contrast ratio between a text color and its background. It reports the exact ratio, plus whether that ratio clears the AA and AAA thresholds for normal-size text. Large text has lower thresholds, so a pair marked as falling short here can still clear the bar for a heading. A ratio is one input to whether text is readable — size, weight and spacing matter too, and this checks one colour pair rather than your page.
Try it now
💡 Good to know: WCAG requires a contrast ratio of at least 4.5:1 for normal text — an accessibility (and often legal) requirement, not a suggestion.
Worked example
Ratio: 10.18:1 · AA — normal text (4.5:1): ✓ Pass · AAA — normal text (7:1): ✓ Pass
Learn the method
Inputs
- Text color
#111827 - Background
#4ade80
Frequently asked
What ratio do I need?
AA requires 4.5:1 for normal text; AAA requires 7:1. Large text has lower thresholds.
How is it calculated?
Using sRGB relative luminance: (lighter + 0.05) / (darker + 0.05).