What is the difference between WCAG AA and AAA?
AA is the level most guidelines and procurement rules require: at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter, asking for 7:1 and 4.5:1 respectively. In practice, meet AA everywhere and aim for AAA where long-form reading matters.
How is the ratio calculated?
Exactly as WCAG 2.x defines it: the relative luminance L of each colour, then (L1 + 0.05) / (L2 + 0.05) with L1 the lighter one. Relative luminance normalises each sRGB channel to 0–1, divides by 12.92 when it is 0.03928 or below and otherwise raises ((c + 0.055) / 1.055) to the power 2.4, then combines them as 0.2126R + 0.7152G + 0.0722B. Ratios run from 1:1 to 21:1.
What counts as large text?
18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold. Such text only needs 3:1 for AA and 4.5:1 for AAA. Scripts with dense glyphs can still be hard to read at those ratios, so it is safer to hold body copy to the normal-text thresholds.
Does contrast matter for things other than text?
Yes. WCAG 2.1 success criterion 1.4.11 (Non-text Contrast) requires at least 3:1 against adjacent colours for meaningful graphics and user interface components – button borders, input outlines, icons and chart elements. This tool shows that 3:1 verdict from the same pair of colours.