Color Contrast Checker (WCAG)
Check the contrast ratio between two colors and verify WCAG AA and AAA compliance for text accessibility.
Last updated
| Level | Normal text | Large text |
|---|---|---|
| AA | PASS | PASS |
| AAA | PASS | PASS |
Large text preview (24px+)
Normal text preview. This is how body copy looks with your selected color combination. Readability matters for all users.
Small text preview (14px). Check that this line is easy to read without straining.
Color Contrast and WCAG Accessibility
Color contrast is a fundamental aspect of accessibility. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to ensure that text is readable by people with low vision or color deficiencies. A contrast ratio of at least 4.5:1 is required for WCAG AA compliance (normal text), and 7:1 for AAA (enhanced). Large text (18pt regular or 14pt bold and above) has a more relaxed threshold: 3:1 for AA and 4.5:1 for AAA.
The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance measures how bright a color appears, taking into account the human eye's sensitivity to different wavelengths (green appears much brighter than blue at the same intensity, for instance). The formula normalizes the luminance values and produces a ratio from 1:1 (identical colors) to 21:1 (pure black on pure white).
Checking contrast is not just a regulatory requirement; it is good design. High-contrast text is easier to read for everyone, not just users with visual impairments. It matters even more in print, where you cannot adjust brightness or zoom in the way you can on a screen. To see how your contrast choices translate to physical output, print our Text Clarity test page and evaluate readability at multiple font sizes.
Worked examples
Real conversions this tool produces — enter the inputs to reproduce each result.
Dark slate body text on white
Input
- Foreground
- #1F2937
- Background
- #FFFFFF
Result
- Contrast ratio
- 14.68:1
- AA normal text
- PASS
- AAA normal text
- PASS
14.68:1 clears AAA (7:1) with room to spare — this is why near-black slate, not pure black, is a safe default for body copy without the harsh edge of #000 on #FFF.
Brand blue used as text on white
Input
- Foreground
- #2563EB
- Background
- #FFFFFF
Result
- Contrast ratio
- 5.17:1
- AA normal text
- PASS
- AAA normal text
- FAIL
5.17:1 passes AA for body text but misses AAA. A brand blue this saturated is fine for links and buttons, but for long passages of small blue text you'd want to darken it.
The grey that's right at the edge
Input
- Foreground
- #64748B
- Background
- #FFFFFF
Result
- Contrast ratio
- 4.76:1
- AA normal text
- PASS
- AAA normal text
- FAIL
Slate-500 passes AA at 4.76:1 with almost no margin — one shade lighter (slate-400) drops to about 3.5:1 and fails. That single step is why muted UI text should stop at slate-500, never -400.
Related content
Was this page helpful?
Contrast ratios are calculated per WCAG 2.1 guidelines. On-screen rendering may differ from printed output. See our methodology and full disclaimer.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
For WCAG AA compliance, normal text (under 18pt or under 14pt bold) requires a contrast ratio of at least 4.5:1. Large text (18pt+ regular or 14pt+ bold) requires at least 3:1. These are minimum thresholds, and higher ratios are always better for readability.
What is the difference between WCAG AA and AAA?
AA is the standard accessibility level required by most regulations and guidelines. AAA is an enhanced level with stricter contrast requirements (7:1 for normal text, 4.5:1 for large text). AAA is the goal for optimal accessibility but is not required by most legal frameworks.
Does this apply to print as well as web?
WCAG was designed for digital content, but the principles apply to print too. In print, you lack the user's ability to zoom or adjust settings, so high contrast is arguably even more important. Use this checker when designing printed materials to ensure readability.
Why does white text on a light background fail?
Light foreground on a light background produces a low contrast ratio because both colors have high relative luminance. The human eye cannot easily distinguish between two light colors, which is why WCAG requires a minimum luminance difference.
Cite or embed this tool
Cite this tool
PrinterTools. (2026). Color Contrast Checker (WCAG) [online tool]. https://printertools.net/tools/color-contrast-checkerEmbed this tool
Paste this on your site to link readers to the free tool. It renders as:
<a href="https://printertools.net/tools/color-contrast-checker" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;background:#ffffff;font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.3;color:#2563eb;text-decoration:none;">Color Contrast Checker (WCAG) — free tool by PrinterTools</a>More Print calculators
Browse all print calculators — Color converters for RGB, HEX, CMYK, HSL, HSV, Pantone, RAL, and NCS — plus DPI, paper size, contrast, and ink estimators.