WCAG 2.2 AA contrast
Normal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1.
Why it matters
#767676 is famously the lightest gray that passes 4.5:1 on pure white. Light gray text looks elegant in Figma and unreadable on a phone in sunlight.
White on bright orange is only about 2.8:1, a very common brand-color fail. Dark text passes easily. Check before you ship the button.
Saturated mid-blues and purples feel bright but sit too close to navy in luminance. Lighter tints like sky blue pass comfortably.
How to apply it
- Check every text and background pair, including buttons and placeholders
- Test brand colors early: white on orange, yellow or light green usually fails
- Run pairs through the contrast checker in this game before handoff
Common mistakes
- Light gray body text
- Text over busy photos without an overlay
Quick answers
What is WCAG 2.2 AA contrast?
Normal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1. #767676 is famously the lightest gray that passes 4.5:1 on pure white. Light gray text looks elegant in Figma and unreadable on a phone in sunlight.
How do I apply WCAG 2.2 AA contrast in UI design?
Check every text and background pair, including buttons and placeholders. Test brand colors early: white on orange, yellow or light green usually fails. Run pairs through the contrast checker in this game before handoff.
What are common mistakes with WCAG 2.2 AA contrast?
Light gray body text. Text over busy photos without an overlay.