Color Contrast Checker
Check WCAG color contrast
Sample Text Preview
What Is This Tool?
The Color Contrast Checker computes the WCAG contrast ratio between a foreground (text) color and a background color, using the standard relative luminance formula, and shows pass/fail badges for WCAG AA and AAA thresholds at both normal and large text sizes.
How to Use
Pick or type a foreground (text) color.
Pick or type a background color.
The contrast ratio, live preview, and WCAG pass/fail badges update automatically.
Features
- Precise WCAG relative luminance and contrast ratio formula
- Live-updating ratio as you adjust either color
- Pass/fail badges for AA and AAA, normal and large text
- Live sample text preview in your chosen colors
- Native color pickers synced with HEX inputs
- 100% client-side — nothing leaves your browser
Examples
Black on white: #000000 on #ffffff → 21.00:1 (passes every WCAG level).
Borderline example: light gray #999999 text on white #ffffff → roughly 2.85:1, which fails AA normal text (4.5:1) and even AA large text (3:1).
Common Use Cases
- Verifying a design's text and background colors meet accessibility guidelines
- Choosing an accessible accent or link color against a given background
- Auditing an existing UI's color contrast before a design review
- Comparing multiple color pairs to find one that passes AAA
Frequently Asked Questions
What is the WCAG contrast ratio formula?
Each color's sRGB channels are gamma-corrected into linear values, combined into a relative luminance (0.2126*R + 0.7152*G + 0.0722*B), and the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker one's.
What's the difference between AA and AAA?
WCAG AA is the standard minimum accessibility level (4.5:1 for normal text, 3:1 for large text), while AAA is a stricter, enhanced level (7:1 for normal text, 4.5:1 for large text).
What counts as "large text"?
WCAG defines large text as 18pt (24px) regular weight or larger, or 14pt (18.66px) bold or larger. Large text has a lower required contrast ratio than normal body text.
Does this check apply to non-text elements like icons?
No, this tool focuses on the WCAG text contrast criteria. Non-text contrast (UI components, graphical objects) uses a separate WCAG success criterion with its own 3:1 minimum ratio.
Is my color data sent anywhere?
No. All contrast calculations happen locally in JavaScript in your browser. Nothing is uploaded or logged.
Why did my ratio come out slightly different from another tool?
Minor differences can come from rounding at different stages of the gamma-correction and luminance calculation. This tool follows the standard WCAG 2.x formula precisely.