How WCAG contrast is calculated
WCAG 2.1 defines contrast as the ratio between the relative luminance of text and
background. Relative luminance of an RGB color is obtained by first linearizing
each channel (compensating sRGB gamma) and then weighting:
0.2126Β·R + 0.7152Β·G + 0.0722Β·B. Green weighs the most because the
human eye perceives it as the brightest channel.
The final ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the
luminance of the lighter color and L2 of the darker. It ranges from
1:1 (same color, unreadable) to 21:1 (pure
black on pure white).
WCAG levels explained
- AA normal text: 4.5:1 β the legal minimum in many laws (EAA in Europe, ADA in the U.S. for public sites).
- AA large text: 3:1 β text 18pt regular or 14pt bold and up (β 24px / 18.6px on screen).
- AAA normal text: 7:1 β the ideal. Required for government and healthcare in many countries.
- AAA large text: 4.5:1 β matches AA normal.
- UI components: 3:1 β input borders, icons, charts. Separate criterion (1.4.11).
Common mistakes
The most common: light gray on white. #999999 on #FFFFFF
gives 2.85:1 and fails even AA large text. If your placeholder or
secondary text is #9CA3AF (Tailwind gray-400) on white, it fails.
Use #6B7280 (gray-500) or darker.
Second mistake: text on top of images. A photo with variable luminosity never
guarantees consistent contrast. Fix: solid rgba(0,0,0,0.5) overlay
between image and text.
Why AAA isn't always feasible
Hitting 7:1 with your own brand colors is hard. Many brands have corporate colors that don't even reach AA. Pragmatic exit: use brand color only on non-critical elements (decoration, large headers), and for body text use black or very dark gray on light background. Apple, Stripe and most SaaS do this.
Three golden rules for accessible design
- Check small text first. If it passes AA, almost everything else passes too.
- Don't rely on color alone to convey information. Errors in red + icon. Status in green + label. Color-blind users will thank you.
- Test on real devices, not just a calibrated designer monitor. Phone brightness in direct sunlight changes everything.