What is a Color Contrast Checker?
Low-contrast text excludes real users and fails accessibility audits. WCAG sets hard thresholds: 4.5:1 for normal text (AA), 3:1 for large, 7:1 for AAA.
Enter any two colors for the exact ratio, all four verdicts, and a live text sample rendered in your actual combination.
How to use the Color Contrast Checker
- Enter the text color and background color.
- Read the ratio and the AA/AAA verdicts.
- Adjust lightness until the levels you need pass.
Frequently asked questions
What ratio do I need?
AA: 4.5:1 for normal text, 3:1 for large (18pt+, or 14pt bold) — the usual legal/audit bar. AAA doubles down at 7:1.
How is the ratio computed?
From relative luminance per the WCAG formula: (L1+0.05)/(L2+0.05), ranging 1:1 to 21:1.
My brand color fails — now what?
Keep the hue, shift the lightness. A slightly darker variant of the same hue usually passes without reading as a different color.
Does this cover non-text UI?
Icons and control boundaries need 3:1 against adjacent colors (WCAG 1.4.11) — check those pairs too.