WCAG Color Contrast Checker
Check text/background contrast against WCAG AA and AAA — with a live preview, in your browser.
Almost before we knew it,
we had left the ground. The quick brown fox jumps over the lazy dog.
Large text is 18pt (24px) or 14pt (18.66px) bold and above.
About WCAG Color Contrast Checker
Enter a text color and a background color to get their exact WCAG contrast ratio (from 1:1 to 21:1) and see, at a glance, whether the pair passes WCAG AA and AAA for both normal and large text. A live sample renders your text on the background so you can judge readability as well as the numbers.
The ratio uses the official WCAG relative-luminance formula, so results match accessibility auditing tools. Use the swap button to flip foreground and background. Everything is computed locally in your browser; nothing is uploaded.
Dark gray on white
#1f2937 on #ffffff
14.68:1 — passes AA and AAA for all text sizes
AA needs 4.5:1 for normal text and 3:1 for large; AAA needs 7:1 and 4.5:1.
Frequently asked questions
What contrast ratios does WCAG require?
AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal and 4.5:1 for large. Large text is 24px, or 18.66px bold, and above.
How is the ratio calculated?
It uses the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors.
Which color formats can I enter?
HEX, rgb()/rgba(), hsl()/hsla() and named CSS colors, or pick colors with the swatches.
Is my data uploaded anywhere?
No. The contrast check runs entirely in your browser.