WCAG thresholds
| Level | Normal text | Large text* |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
*Large means at least 24px regular or about 18.7px (14pt) bold. Icons, input borders and focus indicators need 3:1 against adjacent colors (WCAG 1.4.11).
How the ratio is calculated
Each color is converted to relative luminance using the sRGB formula from WCAG 2.x, and the ratio is (L1 + 0.05) / (L2 + 0.05), from 1:1 up to 21:1. A semi-transparent text color is first blended over the background. The newer APCA method proposed for WCAG 3 scores some pairs differently, but WCAG 2.x level AA is what accessibility rules such as the European Accessibility Act (via EN 301 549) point to today.
FAQ
Which color formats can I type?
#rgb, #rrggbb, #rrggbbaa, rgb()/rgba(), hsl()/hsla() and any CSS color name such as rebeccapurple.
Is passing AA enough?
AA is the legal baseline in most regulations. Body text above AA is still easier to read, especially on phones outdoors.