Contrast Checker
Check the WCAG contrast ratio between a text color and a background color, with instant pass/fail results for AA and AAA and a live preview.
🔒 Processed locally in your browser
Loading…
How to use
- Enter a text (foreground) color in the first field, or pick one with the color swatch.
- Enter a background color in the second field, or pick one with the color swatch.
- The contrast ratio and a live preview of the color combination update instantly.
- Check the four badges to see whether the pair passes WCAG AA and AAA for normal and large text.
Features
- Accepts hex, rgb(), and hsl() color formats
- Computes the exact WCAG 2.x relative-luminance contrast ratio
- Shows pass/fail badges for AA and AAA at both normal and large text sizes
- Live preview of the actual text-on-background color combination
- 100% client-side — your colors never leave your browser
Frequently asked questions
How is the contrast ratio calculated?
The ratio is calculated using the WCAG 2.x formula: each color's sRGB channels are linearized, combined into a relative luminance value, and the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
What's the difference between AA and AAA?
AA is the standard WCAG conformance level most sites target; AAA is a stricter, enhanced level. AA requires 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as "large text" under WCAG?
Large text is defined as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold weight. Large text has lower contrast requirements because bigger, bolder strokes remain legible at a lower ratio.
Which color formats can I enter?
You can type hex codes (#000 or #000000), rgb()/rgba(), or hsl()/hsla() strings, or use the color picker swatches next to each field.
Does this tool store or upload my colors?
No. All parsing and contrast calculations happen locally in your browser using plain JavaScript. Nothing is sent to a server or saved anywhere.