Color contrast checker
Check foreground and background colors against WCAG 2.2 AA and AAA contrast thresholds. Include transparency on an explicit canvas, preview text, and export a report.
Also known asContrast checker · WCAG contrast checker · Accessibility contrast checker · WCAG color contrast checker
Use a CSS color name, HEX, RGB/RGBA, or HSL/HSLA. Transparent colors are composited on the chosen canvas before calculation.
| Use | Minimum | Result |
|---|---|---|
| Normal text · AA | 4.5:1 | Pass |
| Normal text · AAA | 7:1 | Pass |
| Large text · AA | 3:1 | Pass |
| Large text · AAA | 4.5:1 | Pass |
| Essential UI and graphics · AA | 3:1 | Pass |
Pass/fail uses the unrounded ratio. Large text means at least 24 CSS px, or about 18.67 CSS px when bold. UI contrast depends on the actual adjacent colors; this pair alone cannot establish full WCAG conformance.
Make every word easy to read.
Preview uses normal text thresholds. Effective background: #FFFFFF (rounded for display).
Three small steps.
- Enter text and background colors as CSS color names, HEX, RGB, or HSL.
- Choose the opaque canvas behind transparent colors, then review the contrast results.
- Preview normal or large text, swap colors, and copy or download the report.
A few things to know.
Uses the WCAG sRGB relative-luminance calculation with unrounded ratios for pass/fail. Large text is at least 24 CSS pixels or about 18.67 pixels when bold. This checks a solid color pair; gradients, images, actual font rendering, adjacent UI colors, and full accessibility conformance require separate review.
How your privacy works →A little more clarity.
Why does 4.50:1 sometimes fail?
The displayed ratio is rounded to two decimal places. The decision uses the full unrounded value, so a ratio just below 4.5 still fails the normal-text AA threshold.
How does transparency affect the result?
The background is composited on the selected opaque canvas first. Text is then composited on that effective background before contrast is calculated. A different canvas can change the result.
Related searchescontrast checker wcag · color contrast checker accessibility