Colour contrast checker
Check two colours against the WCAG 2 contrast ratio thresholds (AA and AAA, normal and large text, UI components), with a live preview. Runs in your browser.
–
Normal text at 16px: The quick brown fox jumps over the lazy dog.
Large text at 24px (18pt).
Bold text at 14pt (about 18.7px) also counts as large.
How the ratio is calculated
WCAG 2 defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colour. Relative luminance converts each sRGB channel from gamma-encoded to linear light (values at or below 0.04045 are divided by 12.92, larger values use ((c + 0.055) / 1.055) ^ 2.4) and weights them 0.2126 red, 0.7152 green, 0.0722 blue. The result is between 1:1 (identical colours) and 21:1 (black on white). The formula is in the WCAG 2.2 glossary.
What the thresholds mean
| Use | AA | AAA |
|---|---|---|
| Normal text (under 18pt, or under 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt / 24px, or 14pt / about 18.7px bold) | 3:1 | 4.5:1 |
| User-interface components and graphics (borders, icons, focus rings) | 3:1 | – |
Most sites aim for AA. Logos and purely decorative text are exempt. Disabled controls are exempt too, but readers still benefit if they are legible. Alpha (transparency) is ignored by this tool: flatten a translucent colour against its real background first.
For the background behind this, read the accessibility checklist.