WCAG 2.1 ratio for text and interface elements — and, when it fails, the nearest colour that passes.
Accepts #rgb, #rrggbb or rgb(r g b).
Large text, 24px
Body text at 16px — the size most of a page is actually set in.
4.54 : 1 contrast ratio
| Use | Required | Result |
|---|
Nearest passing colour
Same hue and saturation, lightness moved just far enough to reach AA for body text. Brand colours usually survive this.
—What the thresholds mean. AA needs 4.5:1 for body text and 3:1 for large text (18.66px bold, or 24px regular) and for interface components such as input borders and focus rings. AAA raises body text to 7:1. Ratios are computed with the WCAG 2.x relative-luminance formula.