WCAG AA — Glossary

WCAG AA is the second of three conformance levels in the Web Content Accessibility Guidelines, and it is the level most laws and procurement rules ask for. WCAG stands for Web Content Accessibility Guidelines, published by the W3C. For color, AA means a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text, as set by success criterion 1.4.3.

How it works

Conformance levels are cumulative. A page meets Level AA when it satisfies every Level A and Level AA success criterion, or when a conforming alternate version exists. Level AAA adds more on top.

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B after each sRGB channel is linearized. Ratios range from 1:1 to 21:1.

The AA color-related criteria are:

1.4.3 Contrast (Minimum): 4.5:1 for text and images of text, 3:1 for large-scale text. Large means at least 18 point, or 14 point bold.
1.4.11 Non-text Contrast: 3:1 against adjacent colors for user interface components, their states, and graphics needed to understand the content.
1.4.1 Use of Color: color cannot be the only way to convey information. This is Level A, so AA includes it.
2.5.8 Target Size (Minimum): pointer targets at least 24 by 24 CSS pixels, added in WCAG 2.2.

const lin = v => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
const lum = h => { const n = parseInt(h.slice(1), 16);
  return 0.2126 * lin(n >> 16 & 255) + 0.7152 * lin(n >> 8 & 255) + 0.0722 * lin(n & 255); };
const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
for (const fg of ['#777777', '#767676', '#3b82f6']) {
  const r = ratio(fg, '#ffffff');
  console.log(fg, 'on white', r.toFixed(2) + ':1', 'text', r >= 4.5 ? 'pass' : 'fail', 'large/UI', r >= 3 ? 'pass' : 'fail');
}

#777777 on white 4.48:1 text fail large/UI pass
#767676 on white 4.54:1 text pass large/UI pass
#3b82f6 on white 3.68:1 text fail large/UI pass

What is the minimum contrast ratio for WCAG AA?

The minimum is 4.5:1 for normal text and 3:1 for large text, and 3:1 for UI components and graphics. #767676 on white is the lightest neutral gray that passes for normal text. The W3C says computed ratios must not be rounded, so 4.499:1 fails.

What counts as large text in WCAG?

Large-scale text is at least 18 point or 14 point bold. The W3C maps 1pt to about 1.333 CSS pixels, so that is roughly 24px, or about 18.5px bold. Anything smaller needs the full 4.5:1.

Common pitfalls

Rounding the ratio: a computed 4.48 shown as 4.5 still fails. Use the exact value.
Forgetting placeholder and hover text: the Understanding document says placeholder text and text shown on hover or focus must also meet the ratio.
Skipping component borders: a pale input border on white can fail 1.4.11 even when the label text passes.
Testing only the default state: focus, hover, active and error states each need their own check.
Checking text over images with one sample: gradients and photos need the worst-case background color behind the text.

Related terms

WCAG AAA — the stricter level with 7:1 text contrast
Color blindness — the vision difference that makes color-only cues fail
RGB — the channel values the luminance formula reads
Hex color — the notation most contrast checks start from
sRGB — the color space the formula assumes