Color Contrast Checker
Check color contrast ratio against WCAG accessibility standards. Test text and background colors for AA and AAA.
Almost before we knew it
We had left the ground — the quick brown fox jumps over the lazy dog.
About This Free Online Color Contrast Checker
Our free online color contrast checker measures the contrast ratio between a text color and a background color, then grades it against the WCAG 2.1 accessibility standards. Enter two hex colors and instantly see the ratio (from 1:1 to 21:1), whether it passes AA and AAA for normal and large text, and a live preview of the text on the background. Essential for designers and developers building accessible, readable websites. All calculations run in your browser.
Features of Our Color Contrast Checker
- WCAG contrast ratio from 1:1 to 21:1
- AA and AAA pass/fail for normal and large text
- Live text-on-background preview
- Uses official relative luminance formula
- Live results as you type
- 100% private — browser-only processing
How to Use the Color Contrast Checker
The Color Contrast Checker works right in your browser — no signup, no installation. Follow these steps:
- Enter the text (foreground) color as a hex code.
- Enter the background color as a hex code.
- Read the contrast ratio and AA/AAA pass-fail badges.
- Adjust colors until you reach the level you need.
Frequently Asked Questions About Color Contrast Checker
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Higher ratios mean more readable text.
How is contrast ratio calculated?
It compares the relative luminance of the two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result ranges from 1:1 (no contrast) to 21:1 (black on white).
What counts as large text?
WCAG defines large text as 18pt (about 24px) or larger, or 14pt (about 18.66px) bold or larger. Large text has slightly relaxed contrast requirements because it is easier to read.
Why Choose the Color Contrast Checker?
The Color Contrast Checker gives designers and developers accurate colour values and live feedback without leaving the page. Everything is computed in your browser, so previews are instant and your palette work stays on your machine.