FREE BROWSER TOOLContent creation
Color Contrast Checker — WCAG AA & AAA Text Ratios
Check a text color against its background before using the pair in a landing page, presentation or interface. Enter two solid sRGB hex colors to calculate their contrast ratio and text-level AA and AAA results.
Calculations run in your browser. No account or API key is needed.
Your result
- Contrast ratio
- 3.6602:1
- AA normal text · 4.5:1
- Fail
- AA large text · 3:1
- Pass
- AAA normal text · 7:1
- Fail
- AAA large text · 4.5:1
- Fail
Contrast ratio: 3.6602:1 AA normal text · 4.5:1: Fail AA large text · 3:1: Pass AAA normal text · 7:1: Fail AAA large text · 4.5:1: Fail
How to use this tool
Enter the foreground text color as #RGB or #RRGGBB.
Enter the solid background color behind the text.
Check the ratio and compare the result for your text size.
Choose the right text threshold
WCAG AA calls for 4.5:1 for normal text and 3:1 for large text. Large means at least 18 pt, or 14 pt when bold. AAA raises those thresholds to 7:1 and 4.5:1 respectively. Pass/fail uses the unrounded ratio.
A color pair is one part of a page
The calculation assumes opaque colors on a uniform background. Gradients, photographs, opacity and hover states require additional checks against what actually appears behind the text. A passing color pair does not certify the whole page as accessible.
Common questions
Why does a rounded value near 4.5 still fail?
A result just below 4.5 cannot pass by rounding. The verdict uses the full calculated value even when the display is shortened.
Can I use CSS color names or transparent colors?
Use three-digit or six-digit hex for solid sRGB colors. Composite transparent layers first, then check the resulting visible colors.