How to use the color contrast checker
- Enter the foreground hex color (the text or icon).
- Enter the background hex color behind it.
- Read the contrast ratio displayed immediately below.
- Check each row to see whether the combination passes WCAG AA or AAA for normal text, large text, and UI components.
How the contrast ratio is calculated
The WCAG 2.x algorithm first converts each sRGB channel (0 to 255) into a linear value. Divide by 255, then apply the gamma curve: if the result is 0.03928 or less, divide by 12.92; otherwise raise ((value + 0.055) / 1.055) to the power of 2.4.
Relative luminance L is computed as L = 0.2126 * R + 0.7152 * G + 0.0722 * B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. For example, pure black has L = 0 and pure white has L = 1, giving (1.05) / (0.05) = 21.00:1.
WCAG 2.2 contrast thresholds
The Web Content Accessibility Guidelines define minimum ratios for different content types. Use this table as a quick reference when evaluating results from any contrast checker.
| Level | Content type | Minimum ratio |
|---|---|---|
| AA | Normal text (under 18pt or 14pt bold) | 4.5:1 |
| AA | Large text (18pt+ or 14pt+ bold) | 3.0:1 |
| AA | UI components and graphics | 3.0:1 |
| AAA | Normal text | 7.0:1 |
| AAA | Large text | 4.5:1 |
A color contrast ratio of 4.5:1 means the lighter color reflects 4.5 times more light than the darker one after gamma correction.
Common contrast mistakes
Designers often pick colors that look fine on a calibrated monitor but fail for users with low vision or on cheap screens. Light gray placeholder text on a white background is a frequent offender: #999999 on #FFFFFF yields only 2.85:1, which fails every WCAG level.
Another mistake is testing only normal text thresholds while using the same color pair for small icons or focus rings. UI components require at least 3:1 under AA. Always run your palette through a wcag contrast checker before shipping.
Finally, remember that overlays, gradients, and images behind text change the effective background. Test the worst-case area, not just the average.
Working with color formats
This tool accepts hex codes because they are the most common format in CSS. You can enter three-character shorthand like #f00 or six characters like FF0000, with or without the leading hash.
If your design system uses other formats, convert them first. Tools like hex to rgb or rgb to hex handle the math. For print-oriented work you might also use hex to cmyk or cmyk to hex to move between screen and press palettes. If you need standardized spot colors, a Pantone color finder can help locate the closest match.
Why contrast matters beyond compliance
Meeting WCAG levels avoids legal risk in many jurisdictions, but the real goal is readability. Roughly 8 percent of men and 0.5 percent of women have some form of color vision deficiency. A sufficient color contrast ratio ensures that text remains legible regardless of how an individual perceives hue.
Good contrast also helps in bright environments, on low-quality displays, and for aging eyes. Treat the contrast ratio calculator as a baseline quality check rather than a box-ticking exercise.
Worked examples
| Example | Input | Result |
|---|---|---|
| Black on white | Foreground color (hex): #000000; Background color (hex): #FFFFFF | Contrast ratio: 21.00:1; AA normal text: Pass; AA large text: Pass; AAA normal text: Pass; AAA large text: Pass; UI components: Pass |
| Gray text on white | Foreground color (hex): #777777; Background color (hex): #ffffff | Contrast ratio: 4.48:1; AA normal text: Fail; AA large text: Pass; AAA normal text: Fail; AAA large text: Fail; UI components: Pass |
| White on dark blue | Foreground color (hex): fff; Background color (hex): 003366 | Contrast ratio: 12.61:1; AA normal text: Pass; AA large text: Pass; AAA normal text: Pass; AAA large text: Pass; UI components: Pass |
| Red on black | Foreground color (hex): #FF0000; Background color (hex): #000000 | Contrast ratio: 5.25:1; AA normal text: Pass; AA large text: Pass; AAA normal text: Fail; AAA large text: Pass; UI components: Pass |
FAQ
What is a good contrast ratio for body text?
WCAG AA requires at least 4.5:1 for normal-sized body text. For enhanced accessibility, AAA requires 7:1.
Does this color contrast checker support alpha transparency?
No. Hex colors with alpha channels produce unpredictable contrast depending on what lies beneath. Flatten your colors against the actual background first, then enter the resulting solid hex values.
Can I enter three-digit hex codes?
Yes. The tool expands shorthand like #abc to #aabbcc automatically. You may include or omit the hash symbol.
What counts as large text under WCAG?
Large text is defined as 18 point (24px) or larger, or 14 point (18.66px) or larger when bold. Large text requires a lower contrast ratio of 3:1 for AA.
Is my data sent to a server?
No. All calculations happen locally in your browser. Nothing is uploaded or stored.
Why does #777777 on white fail AA?
The relative luminance of #777777 is about 0.1845. Against white (luminance 1.0), the ratio is (1.05) / (0.1845 + 0.05) = 4.48:1, which is just below the 4.5:1 AA threshold for normal text.