Contrast for frontend developers: WCAG AA vs AAA and the 4.5:1 rule

WCAG 2.1 and 2.2 set 4.5:1 for normal text and 3:1 for large text, which starts at 18pt (24px) regular or 14pt (about 18.7px) bold. Icons, input borders, focus rings and chart lines fall under the 3:1 rule for user interface components and graphics. Disabled controls, logos and pure decoration have no requirement.

Placeholder text in an active field is still text. Light gray placeholders are a common audit failure, so aim for 4.5:1 there too, or use a visible label so nobody has to rely on the placeholder.

Common neutral grays sit right on the line. #6b7280 on white is 4.83:1 and passes AA for body text. #9ca3af on white is only 2.54:1, which fails even the 3:1 large text rule. On a dark #111827 background the roles flip. #9ca3af reaches 6.99:1, while #6b7280 drops to 3.67:1 and only works for large text.

Check the default state, then hover, focus, error and selected. Text on images or gradients needs to pass at its weakest point. If you use transparency, test the color it actually blends to on the page. A theme switch means a second full pass, because a palette that passes in light mode can fail in dark mode.