The formula (conceptually)
WCAG computes relative luminance for each color (a weighted mix of linearized R, G, and B), then forms the ratio (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The result ranges from 1:1 (identical) to 21:1 (black on white).
AA vs AAA
- AA normal text: at least 4.5:1
- AA large text: at least 3:1 (18pt or 14pt bold)
- AAA normal: at least 7:1
- AAA large: at least 4.5:1
UI components
Non-text UI (icons, focus rings, charts) often follows the 3:1 graphical object guidance. Always verify critical paths — forms, errors, and navigation — with real type sizes.
Check free
Use ChromaNest's contrast checker to pick foreground and background hex values, swap them, and see pass/fail for AA and AAA instantly.