About WCAG Contrast Checker
The Contrast Checker reports the luminance contrast ratio between two colors using the WCAG 2.1 formula. It is meant for the moment in a design review when someone asks "does this pass AA?" — pick the two colors, read the number, move on.
Everything runs in the browser. Color values are not sent anywhere.
How to Use
- Enter colors — Pick or type HEX values for the foreground (text) and background.
- Read the ratio — The contrast ratio is shown as a number between 1.00 (no contrast) and 21.00 (pure black on pure white).
- Check WCAG criteria — Four pass/fail badges show whether your combination meets AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1).
- Preview — The right panel renders sample text in your chosen colors so you can judge how the combination looks at body and heading sizes.
Frequently Asked Questions
Q: What is a good WCAG contrast ratio?
Body text needs 4.5:1 for AA Normal and 7:1 for AAA Normal. Large text — 18pt or 14pt bold — drops to 3:1 (AA) or 4.5:1 (AAA).
Q: What counts as "large text" under WCAG?
Text is "large" when it is at least 18pt (~24px) regular weight or 14pt (~18.66px) bold weight. Anything smaller is treated as body text.
Q: How is the contrast ratio calculated?
Each color's sRGB channels are linearized, then combined with the coefficients 0.2126R + 0.7152G + 0.0722B to produce a relative luminance value. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
Q: Does this tool support alpha (transparency)?
No. WCAG contrast is defined for opaque colors. If your text uses an alpha channel, first composite it over the background and use the resulting solid color here.
Q: Does meeting WCAG ensure accessibility for everyone?
WCAG contrast is a strong baseline but does not cover every type of color vision deficiency. Pair the contrast check with a color blindness simulator and real-user testing for production sites.
Related Tools
Timestamp Converter
Convert Unix timestamps to human-readable dates and vice versa.
Color Converter
Convert colors between HEX, RGB, HSV, CMYK, and HSL formats.
Aspect Ratio Calculator
Calculate and convert aspect ratios for images and videos.
PX / REM / EM Converter
Convert between PX, REM, and EM CSS units instantly with customizable base font size.
DPI / PPI Calculator
Calculate screen pixel density from resolution and size.
Date Diff Calculator
Find years, months, days, hours, and business days between any two dates and times.
Color model reference
When to pick each color representation. Conversion is lossless between HEX, RGB, and HSL but lossy to CMYK (gamut differs) and HSV (perceptual differences).
| Model | Range | Use case |
|---|
| HEX | #000000 – #FFFFFF | CSS, HTML, design tools default. |
| RGB | 0–255 × 3 | Canvas API, raster pixel manipulation. |
| HSL | H 0–360°, S/L 0–100% | Theme design — easier to shift hue or lightness by hand. |
| HSV | H 0–360°, S/V 0–100% | Photoshop color picker; "value" maps to brightness. |
| CMYK | 0–100% × 4 | Print workflows. Converting back to RGB is approximate. |