Color Contrast Checker
Check text and background colors against WCAG 2.2 AA and AAA — with a live preview, instant pass/fail badges, one-click fix suggestions that keep your hue, and the upcoming APCA score as a bonus.
- AA normal text ✓
- AA large text ✓
- AAA normal text ✗
- AAA large text ✓
- UI components (3:1) ✓
APCA (beta): Lc 83.3|Lc| ≥ 60 ≈ body text, ≥ 75 preferred
The quick brown fox jumps over the lazy dog — 16 px body text.
Large text at 24 px
What the contrast ratio actually measures
WCAG contrast compares the relative luminance of two colors — how much light they emit to a standardized eye — and expresses it as a ratio from 1:1 (identical) to 21:1 (pure black on pure white). Luminance is computed in linear light, which is why intuition often fails: two colors that “look different” can still land near 2:1, far below the readable range. Hue barely matters to the formula; lightness difference is nearly everything.
The thresholds that matter
| Requirement | Minimum ratio | Applies to |
|---|---|---|
| AA, normal text | 4.5 : 1 | Body copy under 24 px (18.66 px if bold) |
| AA, large text | 3 : 1 | Text ≥ 24 px, or ≥ 18.66 px bold |
| AA, non-text UI | 3 : 1 | Input borders, icons, focus rings (WCAG 1.4.11) |
| AAA, normal text | 7 : 1 | Stricter reading tier |
| AAA, large text | 4.5 : 1 | Stricter reading tier |
Placeholder text, hint text and text over images are the classic failure spots — designers lighten them for elegance until they quietly drop under 4.5:1. Disabled controls and logos are formally exempt, but everything a user must read to operate the page is not.
How the fix suggestions work
When a pair fails, this tool doesn’t throw random darker colors at you. It keeps your text color’s hue and chroma and searches — in the perceptually uniform OKLCH space — for the smallest lightness change that reaches the target ratio, in both directions. The result still reads as “your” color: a failing brand blue becomes a slightly deeper brand blue, not navy. If even pure black or white can’t pass on your background, the background itself is the problem and the tool says so.
Why APCA is shown alongside
The WCAG 2.x formula treats light-on-dark and dark-on-light symmetrically, but human vision doesn’t — light text on dark backgrounds reads worse than the ratio suggests. APCA, the candidate model for WCAG 3, fixes this with a polarity-aware Lc score (positive for dark-on-light, negative for light-on-dark). Until WCAG 3 ships, treat the 2.x ratio as the compliance number and APCA as a design sanity check — if they disagree strongly, trust your eyes and test with real users.
Practical tips for passing without redesigning
- Fix lightness, not hue — contrast is almost entirely a lightness game, so the suggestions above change only that.
- Check both themes: a pair that passes in light mode often fails inverted in dark mode.
- Never rely on color alone for state — pair error-red with an icon or text, both for contrast and for color-blind users.
- Test text over photos against the lightest region it can sit on, not the average.
- For thin or light-weight fonts, aim a step higher than the minimum — 4.5:1 on a 300-weight font reads worse than on a 400-weight one.
Everything runs locally in your browser; the colors you test are never uploaded. Grab colors straight from a screenshot with the image color picker, or fine-tune a shade first in the color converter.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
Normal-size text needs at least 4.5:1 against its background. Large text — from 24 px regular or about 18.7 px bold — needs 3:1. Non-text UI parts like input borders and icons also need 3:1 under WCAG 1.4.11.
What is the difference between AA and AAA?
AAA is the stricter tier: 7:1 for normal text and 4.5:1 for large text. Most legal requirements reference AA; AAA is worth targeting for long-form reading and vision-critical audiences.
What counts as “large text”?
WCAG defines large as at least 18 point (24 px) regular weight, or 14 point (about 18.66 px) bold. Everything smaller must meet the normal-text thresholds.
Do logos and disabled buttons need to pass?
No. Logotypes and purely decorative text are exempt, and text in inactive/disabled controls has no contrast requirement — though keeping it readable is still good practice.
What is APCA and why does this page show it?
APCA (Accessible Perceptual Contrast Algorithm) is the candidate model for WCAG 3. It scores contrast as an Lc value that tracks human perception better than the 2.x ratio, especially on dark backgrounds. It is shown here as a beta reference — AA/AAA compliance today is still judged by the WCAG 2.x ratio.
How are the fix suggestions calculated?
The tool keeps your text color’s hue and saturation, and searches the smallest lightness change (in the perceptual OKLCH space) that reaches the target ratio — one candidate darker, one lighter — so the fixed color still looks like your color.