WCAG Color Contrast Checker
Pick any two colors and get the exact WCAG 2.1 contrast ratio with instant pass/fail for AA and AAA. Everything runs in your browser — nothing is uploaded.
Check a color pair
—
Nearest text colour that passes AA (4.5:1):
| Content | Required ratio | AA | AAA | |
|---|---|---|---|---|
| Normal text (< 18pt / < 14pt bold) | 4.5 : 1 | — | — | |
| Large text (≥ 18pt or ≥ 14pt bold) | 3 : 1 | — | — | |
| UI components & graphical objects | 3 : 1 | — | n/a | |
Large heading preview
This is how normal body text looks in your chosen combination. Readable at length? Your readers will decide in seconds.
Ratios follow WCAG 2.1 success criteria 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) and 1.4.11 (Non-text Contrast). Fixing failures site-wide? The free Accessibility Scanner finds low-contrast text on a whole page.
You tested one pair of colors. A site is every pair.
| Plan | Free | EUComply Pro |
|---|---|---|
| What you get |
|
|
| Price | $0no licence key needed | $79/year per website |
$149 once per website — lifetime, first 100 purchases
Does not include DPA, NIS2 clauses, or other documents — sold separately
Buy EUComply Pro — $79/year per website
One website per licence. See what Pro adds before you buy.
Check many pairs at once
Paste one colour pair per line — foreground and background as hex codes, separated by a space or comma. Get the ratio and AA/AAA verdict for every pair in one table.
One pair per line: #1a1e21 #ffffff or #1a1e21,#ffffff. Lines without two valid hex colours are skipped.
| Foreground | Background | Ratio | APCA Lc | AA | AAA |
|---|
How the ratio is calculated
Each color is converted to sRGB relative luminance (L = 0.2126·R + 0.7152·G + 0.0722·B after gamma expansion). The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. A ratio of 1:1 means identical colors; 21:1 is the maximum (black on white). This matches the formula in the WCAG specification exactly.
Underneath it you also get an APCA Lc score, the perceptual model being drafted for WCAG 3. It is signed: a positive number means dark text on a light background, a negative number means light text on dark — the polarity the 2.x ratio ignores. The Lc figure is the reference APCA 0.1.9 calculation (W3), and the guidance next to it follows APCA's own thresholds: 90 for preferred body text, 75 the minimum for body text, 60 for large headings, 45 for large or bold text, and 30 the absolute floor.
← All free tools · Text on image checker · Full-page accessibility scanner · Palette generator · Dansk version · dansk guide
Frequently asked questions
What ratios do AA and AAA require?
WCAG 2.x AA requires 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold and up). AAA raises this to 7:1 and 4.5:1 respectively. Non-text UI components like input borders need 3:1 under AA.
How is contrast ratio calculated?
Relative luminance of both colors is computed per the WCAG formula (sRGB values linearized, then weighted 0.2126 R + 0.7152 G + 0.0722 B), and the lighter value is divided by the darker plus 0.05. The result ranges from 1:1 to 21:1.
Does it check more than foreground/background pairs?
You can test any pair of colors, including disabled states and placeholder text. Note that WCAG exempts logotypes and purely decorative elements from the thresholds.
Why does white text on my brand color fail?
Many mid-tone brand colors (yellows, light blues, tans) have high luminance, so white on top yields ratios near 2:1. Switching to dark text often passes instantly — try both directions before redesigning the palette.
This checker is free. Checking the whole site is not.
You have tested one pair of colors. Nothing here says whether the rest of the site passes — that is what EUComply Pro is for: it reads the page from the server, runs the 15 accessibility checks, and adds 18 server-side GDPR, cookie, security and metadata checks on top, 33 in all, in a PDF report you can hand to a client.