Color Contrast Checker — WCAG AA/AAA Compliance
Test text contrast against WCAG 2.2: compute the ratio, check AA (4.5:1) and AAA (7:1) for normal and large text, live while you pick colors. Free.
Low-contrast text is the most common WCAG failure on the web — gray-on-gray that a third of your users strain to read. This checker computes the exact contrast ratio between your text and background colors and reports pass/fail for AA (4.5:1 normal text, 3:1 large) and AAA (7:1) thresholds.
Adjust either color live and watch the ratio update — the fastest way to find the nearest compliant shade instead of guessing. Contrast math is local and instant; no design tool subscription involved.
100% in-browser · no upload · no signup · nothing you paste or drop here leaves your device
WCAG Contrast Checker & Accessibility Tool
Check WCAG 2.2 and APCA contrast. Color-blind simulation, fix suggestions, CSS export — 100% local.
| Text Size | Level | Required | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | ✓ Pass |
| Normal text | AAA | 7:1 | ✗ Fail |
| Large text (≥24px / 18.66px bold) | AA | 3:1 | ✓ Pass |
| Large text (≥24px / 18.66px bold) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
The WCAG contrast ratio formula — illustrated
WCAG 2.2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05), where L₁ and L₂ are the relative luminances of the lighter and darker colors. Relative luminance linearizes each sRGB channel (c/12.92 when c ≤ 0.03928, otherwise ((c+0.055)/1.055)^2.4) and blends them as 0.2126R + 0.7152G + 0.0722B. Pass thresholds depend on text size: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥24px, or ≥18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool computes this ratio live, also reports the APCA Lc perceptual score, simulates protanopia/deuteranopia/tritanopia, and can suggest a passing color.
White on a typical mid-red sits around 2.8:1 — fine for a decorative accent, but far below the 4.5:1 AA floor for body text.
Diego's app uses a red primary button (#ff6b6b) on a white page, and his designer wants to confirm the label passes accessibility standards.
- Input:He enters #ff6b6b as the foreground and #ffffff as the background. The tool parses both to RGB and computes relative luminance: about 0.33 for the red and 1.00 for white.
- Ratio:Contrast = (1.00 + 0.05) / (0.33 + 0.05) ≈ 2.77:1 — below 4.5:1, so normal-size text fails WCAG AA.
- Suggest:The tool's fixer darkens the red toward #cc0000, which lands at roughly 5.9:1 — comfortably above the 4.5:1 AA target, and past the 7:1 mark is achievable for AAA.
- Export:He bumps the button label to 24px (large text, AA floor drops to 3:1), copies the CSS snippet, and checks the APCA Lc value and deuteranopia simulation before shipping.
About this color contrast checker
This page covers wcag contrast ratio calculator, check text accessibility color, aa aaa contrast requirements, gray text accessibility fix — all the same underlying task as color contrast checker. The tool above is FreeToolHub's contrast checker embedded in full: every feature works right here, and nothing you process is uploaded to any server.
Frequently asked questions
What contrast ratio does WCAG require?
AA: 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular), plus 3:1 for UI components and graphics. AAA: 7:1 normal, 4.5:1 large. The calculator reports the exact ratio — 4.48:1 fails AA even though it looks fine, which is why eyeballing is not enough.
Why does my gray text fail contrast checks?
Light gray text on white backgrounds (the default aesthetic of many templates) often lands between 2:1 and 3:5:1 — readable for young eyes in good lighting, and invisible to low-vision users, on cheap panels, and in sunlight. Darkening the gray one or two steps usually reaches 4.5:1 without changing the design feel; the live ratio shows exactly which step gets there.