Exact WCAG ratios with AA / AAA pass-fail for any color pair
| Tier | Text size | Minimum ratio | Where it applies |
|---|---|---|---|
| AA (1.4.3) | Normal | 4.5:1 | Body copy, labels, links, placeholders |
| AA (1.4.3) | Large — 18pt/24px, or 14pt bold | 3:1 | Headings and display type |
| AAA (1.4.6) | Normal | 7:1 | Enhanced tier; long-form reading, low-vision users |
| AAA (1.4.6) | Large | 4.5:1 | Enhanced tier headings |
| AA (1.4.11) | Non-text | 3:1 | Icons, input borders, focus rings, chart lines |
| Pair | Ratio | AA normal | AAA normal | Note |
|---|---|---|---|---|
| #767676 on #ffffff | 4.54:1 | Pass | Fail | Lightest AA gray on white |
| #777777 on #ffffff | 4.48:1 | Fail | Fail | The classic near-miss |
| #595959 on #ffffff | 7.00:1 | Pass | Pass | Lightest AAA gray on white |
| #2563eb on #ffffff | 5.17:1 | Pass | Fail | Tailwind blue-600 link color |
| #dc2626 on #ffffff | 4.83:1 | Pass | Fail | red-600 error text |
| #16a34a on #ffffff | 3.30:1 | Fail | Fail | green-600: large text/UI only |
| #f59e0b on #ffffff | 2.15:1 | Fail | Fail | amber-500 needs dark text instead |
| #f59e0b on #000000 | 9.78:1 | Pass | Pass | Same amber on black sails |
| #000000 on #ffffff | 21.00:1 | Pass | Pass | The maximum possible ratio |
Ratios computed with the WCAG 2.x relative-luminance formula and verified against reference implementations, including the BBC's open-source Apache-licensed color-contrast-checker that popularized AA/AAA pass-fail reporting.
The ratio compares the relative luminance of the two colors — not their perceived darkness, which is why eyeballing fails. Each sRGB channel is linearized (values below 0.04045 divide by 12.92; above that, they follow ((c + 0.055) / 1.055)^2.4), then combine as 0.2126 R + 0.7152 G + 0.0722 B. The ratio is the lighter plus 0.05 over the darker plus 0.05, which puts it between 1:1 (identical colors) and 21:1 (black on white).
Take #767676 text on white. The channel value is 118, so 118/255 = 0.4627, which linearizes to 0.1812 for all three channels — luminance is therefore 0.1812. White's luminance is 1.0, so the ratio is (1.0 + 0.05) / (0.1812 + 0.05) = 4.54:1. That clears AA normal text (4.5:1) and AAA large text, but not AAA normal text (7:1). Darken one step to #595959 and the ratio hits exactly 7.00:1 — the AAA line. One step lighter, #777777, drops to 4.48:1 and fails AA: the pass/fail boundary sits between two adjacent grays, which is the trap that makes a checker worth running.
If a pair fails, the Fix to nearest AA pass button walks the failing color toward the other one in the smallest steps that reach 4.5:1 — the same logic that turns #777777 body copy into #767676 — so the change stays as close to your original palette as hex granularity allows.
AA, the threshold most laws and contracts enforce, needs 4.5:1 for normal text and 3:1 for large text. AAA, the enhanced tier, needs 7:1 for normal text and 4.5:1 for large text. Separately, non-text elements like icons, input borders, and focus indicators need 3:1 under success criterion 1.4.11.
Text is large at 18 point (24 CSS pixels) regular weight, or 14 point (roughly 18.7 pixels) bold. Everything smaller is normal text and must meet the stricter ratio, which is why body copy is where contrast failures cluster.
It measures 4.48:1, two hundredths short of the 4.5:1 AA line. The lightest gray that passes AA on white is #767676 at 4.54:1. Mid-gray on white is the single most common failure because screens and antialiasing make it look more readable than the math says it is.
Yes. Icons, chart lines, focus rings, and input borders are non-text UI components and need 3:1 against adjacent colors (WCAG 1.4.11). Placeholder text is real text: it must meet 4.5:1, which is why the classic pale-gray placeholder fails.
Logotypes and purely decorative elements are exempt. Incidental text, such as a photo of a sign inside an image, is also exempt. Everything a user must read or operate still has to meet the ratios.
Darken the text or lighten the background until the ratio clears the threshold — the checker's fix-it button finds the nearest shade that passes, moving the failing color toward the other one in the smallest steps possible. Avoid fixing by thin weights or tiny type, and never rely on color alone to carry meaning.