Color Contrast Checker
Check WCAG AA and AAA text contrast for opaque hex colors. Preview your pair, swap colors, and apply a higher-contrast text alternative.
Contrast report
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
Export text stays in English; your input is kept as entered.
No signup. No AI credits. This tool assembles your output in your browser.
From an idea to something useful.
- 01
Enter text and background colors.
- 02
Review the calculated ratio and normal or large-text thresholds.
- 03
Try a suggested text color and export the result.
A little context.
Contrast ratios use the WCAG relative-luminance formula for opaque sRGB colors. AA normal text requires 4.5:1 and AA large text requires 3:1. Large text generally means at least 24 CSS pixels, or roughly 18.67 CSS pixels in bold. The raw ratio determines the result before rounding. This is a color check, not an accessibility audit.
Good questions.
Can I enter transparent colors?
No. Use opaque three- or six-digit hex values. Composite transparent colors onto their final background before measuring.
Does a passing ratio mean my page is accessible?
No. Keyboard navigation, semantics, focus, readable sizing, and other requirements still need testing. The tool evaluates only this text/background pair.