WCAG Color Contrast Checker
Check whether a text and background color pair meets WCAG 2.2 AA or AAA contrast requirements.
TL;DR: WCAG Color Contrast Checker is a free, browser-based tool that lets you check whether a text and background color pair meets WCAG 2.2 AA or AAA contrast requirements.
Large text sample (24px bold)
| Requirement | 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 |
About this tool
Check whether a text color and background color combination meets WCAG 2.2 contrast requirements, calculated using the exact relative luminance and contrast ratio formulas from the WCAG specification — not an approximation. WCAG defines different minimum ratios for normal text, large text, and the AA versus stricter AAA conformance levels, and this tool checks a color pair against all four thresholds at once.
Key Features
- Calculates the exact WCAG relative luminance and contrast ratio
- Checks against AA and AAA thresholds, for both normal and large text
- Live color pickers alongside hex input for quick experimentation
- Live preview showing both text sizes in your actual chosen colors
- Accepts 3-digit or 6-digit hex, with or without a leading #
How to Use
- Enter or pick a text color.
- Enter or pick a background color.
- See the exact contrast ratio and which WCAG levels it passes.
When to use it
- Checking a specific brand color pairing before committing to it in a design system
- Auditing an existing site's text/background combinations for accessibility compliance
- Finding out exactly how much darker or lighter a color needs to be to pass AA
- Verifying large heading text against a lighter-weight AA threshold than body text needs
- Quickly comparing several candidate color pairs while designing a UI
Tips & limitations
- "Large text" in WCAG terms means at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold — it has a lower contrast requirement than normal body text, which this tool's preview illustrates directly
- AAA is a stricter, optional conformance level — AA is the level most accessibility guidelines and legal requirements (like the ADA and EN 301 549) actually reference as the baseline
- Contrast ratio is symmetric — swapping which color is text and which is background produces the identical ratio, since the formula only cares about the two luminance values, not which one is "in front"
- This checks contrast only — WCAG accessibility also covers font size, focus indicators, and many other criteria this specific tool doesn't evaluate
The four WCAG contrast thresholds
| Text size | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18px+ regular, or 14px+ bold) | 3:1 | 4.5:1 |
The famous example of #767676 text on a white background sits right at 4.54:1 — just over the AA threshold for normal text, illustrating how close to the line many real-world gray text choices actually land. Contrast ratio ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, the maximum possible).
Frequently Asked Questions
- AA is the WCAG conformance level most accessibility standards and legal requirements actually reference as the baseline; AAA is a stricter, optional level with higher contrast requirements. Meeting AA is generally considered the practical target for most sites.
- WCAG defines large text as at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) at bold weight. Large text has a lower minimum contrast requirement than normal body text, since bigger, bolder strokes remain legible at lower contrast.
- No — the contrast ratio formula is symmetric, so swapping which color is "text" and which is "background" produces exactly the same ratio either way.
- No — contrast is one specific WCAG success criterion among many. Font size, keyboard navigation, focus indicators, alt text, and other criteria all matter separately for overall accessibility.
Cite This Tool
Referencing this tool in a paper, article, or bibliography? Copy a ready-made citation below.
Embed This Tool
Add the live WCAG Color Contrast Checker tool to your own website with this snippet — it loads the real, working tool in an iframe, not a static screenshot.
<iframe src="https://nexlove.org/embed/wcag-contrast-checker.html" width="100%" height="600" style="border:1px solid #e2e8f0;border-radius:12px" title="WCAG Color Contrast Checker — NexLove.org" loading="lazy"></iframe>