Check foreground/background contrast against WCAG AA/AAA.
Updated
Normal body text at 16px — the smallest size the AA 4.5:1 rule targets.
Large text at 24px — falls under the AA 3:1 rule.
Bold 18.66px is also "large" for WCAG purposes.
Quick start
Pick a foreground and background, read the WCAG pass/fail badges. Get a one-click suggestion when AA fails.
Use the native picker or paste any CSS colour — hex, rgb(), hsl(), oklch(), named colours all work.
AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1) and UI components (3:1) each show pass or fail.
If AA fails, the suggested-fix panel proposes the closest passing foreground in OKLCH space — click 'Use this colour' to swap it in.
In-depth guide
Check the WCAG 2.1 / 2.2 contrast ratio between any foreground and background colour. Live preview, pass/fail badges for all four thresholds, and a one-click suggestion for the closest passing colour that preserves your hue.
| Criterion | Ratio | Use case |
|---|---|---|
| AA — normal text | 4.5:1 | Body copy under 18pt / 14pt bold |
| AA — large text | 3:1 | ≥ 18pt or ≥ 14pt bold |
| AAA — normal text | 7:1 | Highest legibility tier |
| AAA — large text | 4.5:1 | Large text at AAA level |
| UI components | 3:1 | Buttons, form borders, icons, focus rings |
Step 1: convert each sRGB channel to linear light. Step 2: take the relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B. Step 3: the contrast ratio is (L_max + 0.05) ÷ (L_min + 0.05). Values range from 1:1 (identical colours) to 21:1 (pure black on pure white).
The +0.05 offset prevents division by zero and dampens unrealistic ratios at the extremes — it's part of the WCAG formula, not our addition.
Tip: when both lighter and darker versions pass equally well, pick whichever fits your brand. Dark mode UIs usually benefit from lighter foregrounds; light mode from darker.
When AA normal fails, we hold your foreground's hue and chroma constant in OKLCH and walk lightness — both up and down — until the contrast against the background passes 4.5:1. We then pick whichever direction moved the smallest perceptual distance.
OKLCH is used because its lightness axis is perceptually uniform: a fixed L-step looks like the same amount of lightening across every hue. RGB or HSL lightness would shift hue or saturation unevenly.
WCAG 2.1 / 2.2, the current ratified standard. The 4.5:1 (normal text), 3:1 (large text and UI components) and 7:1 / 4.5:1 (AAA) thresholds match the W3C's published success criteria.
WCAG: 18pt or larger (~24px), OR 14pt bold or larger (~18.66px bold). Anything smaller is 'normal' and must meet the stricter 4.5:1 (AA) or 7:1 (AAA) ratio.
OKLCH lightness is perceptually uniform, so walking lightness alone preserves the perceived hue and saturation while making the contrast pass. Stepping in RGB or HSL would shift hue unevenly across the spectrum.
No — WCAG also covers focus visibility, link recognition, motion preferences, and many other criteria. Contrast is the most common reason a site fails an audit, but pair this tool with axe-core or Lighthouse for fuller coverage.
APCA (Advanced Perceptual Contrast Algorithm, proposed for WCAG 3) is more accurate for legibility but not yet a normative requirement. We focus on the standard that auditors actually use. APCA support is on the roadmap.
Not in this tool — contrast is computed pixel-by-pixel against a uniform background. Take the brightest and darkest pixel under the text and check both; or, better, place a solid scrim behind the text.
Keep exploring
Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.
Shrink PDF file size without uploading to a server.
Combine multiple PDFs into one in your browser.
Split a PDF by pages or page ranges, download as zip.
Convert JPG, PNG and WebP into a single PDF, locally.