Frontend Developer
Contrast for frontend developers: WCAG AA vs AAA and the 4.5:1 rule
Target 4.5:1 for body text (WCAG AA) and 7:1 for accessibility-critical UI (AAA). Never trust your eyes, always test with a contrast checker before shipping.
Frontend developers shipping accessible UI need to hit WCAG AA contrast ratios: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold), and 3:1 for UI components and graphics. AAA is stricter at 7:1 for normal text, but it's a stretch goal, not a legal baseline.
Why this matters for you
The most common failure is gray text on white. #767676 on white is exactly 4.54:1, just barely AA. Drop to #999999 and you're at 2.85:1, a fail. Dark mode flips the problem: white text on #1a1a1a is 15.3:1 (passes AAA), but #888888 on #1a1a1a is 4.48:1, just under AA. Always test with a contrast checker, not by eye, because human perception of contrast is heavily affected by ambient light and screen brightness.
Verdict
Target 4.5:1 for body text (WCAG AA) and 7:1 for accessibility-critical UI (AAA). Never trust your eyes, always test with a contrast checker before shipping.