English
Check WCAG color contrast and fix failing combinations in one click.
Last updated
Large heading — 24px bold
Body text. The quick brown fox jumps over the lazy dog. Read a paragraph or two and see if the contrast feels comfortable for longer sessions.
Small caption — 12px regular. WCAG only protects 14pt and up at this size, so tiny text needs the strictest contrast.
A *contrast checker* is what designers and developers reach for before shipping a screen. It computes the **contrast ratio** between two colors — your text and the background behind it — using the formula defined in the Web Content Accessibility Guidelines (WCAG). The bigger the ratio, the easier the text is to read.
WCAG defines three thresholds. **3:1** is the minimum for large headings (24px+ regular or 18.66px+ bold) and for the visible boundary of interactive UI components like buttons, form fields, and icons. **4.5:1** is the AA minimum for body text — the bar most teams aim for. **7:1** is AAA, the highest grade, which gives strong support to readers with low vision.
Contrast is **not** the same as how vivid two colors look. Two punchy brand colors can still be hard to read if their *luminance* is close. This tool runs the WCAG luminance formula on every channel, reports the exact ratio, and grades each context, so you don't have to guess.
Type or paste a HEX value, or use the color picker. The foreground is your text or icon; the background is whatever sits behind it.
The big number on the left is the WCAG contrast ratio. Anything below 3:1 is risky for any UI; below 4.5:1 fails for body text.
Three rows show pass/fail for normal text (4.5/7), large text (3/4.5), and UI components (3:1). Aim for the green checkmarks on every row your design actually uses.
When AA fails, the tool can nudge your foreground lightness up or down — keeping the hue — until the pair passes. Click again for AAA.
Once both colors pass the contexts you need, copy the CSS snippet (color: + background:) and drop it into your stylesheet or design token file.
Cross-reference what you're styling with the level you need. Source: WCAG 2.2 Understanding 1.4.3 and 1.4.11.
| Target | AA minimum | AAA minimum | Notes |
|---|---|---|---|
| Body text (< 18pt regular) | 4.5 : 1 | 7 : 1 | Default rule for paragraph copy, labels, captions |
| Large text (≥ 18pt regular or ≥ 14pt bold) | 3 : 1 | 4.5 : 1 | Headings, hero copy, big quotes |
| UI components & graphical objects | 3 : 1 | — | Button borders, form fields, icons, focus rings |
| Logo or pure decoration | Exempt | Exempt | Logotypes and incidental text are exempt — but usability still matters |
| Disabled state | Exempt | Exempt | Inactive controls are exempt, but be careful you don't lean on this to ship low-contrast defaults |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Classic dark-slate on near-white. Passes AAA for body text (≥ 7:1) with room to spare. Most product UIs should aim for this neighborhood by default.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Vivid blues on white often land near 4:1 — readable for large headings (passes 3:1 AA Large) but fails the 4.5:1 bar for body copy. Use it for buttons and CTA labels at 18px+, not paragraph text.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 — fails everything */Bright yellow against white is a famous trap: the colors look loud but their luminance is too close. Reserve this combo for dark backgrounds (e.g. #facc15 on #1f2937 lands at ≈ 12:1).
