WCAG contrast checks before you ship a client site

Low-contrast grey text still shows up in client designs because it looks “premium” on a calibrated monitor. On a sunny phone screen it fails.

Targets that matter

• AA normal text — at least 4.5:1
• AA large text — at least 3:1 (roughly 18pt+ or 14pt bold)
• UI components / graphics — 3:1 for meaningful icons and borders

Workflow

1. Open the dedicated Color Contrast Checker (not just the picker).
2. Paste brand hex for text and background.
3. Check body, headings, buttons, and placeholder text separately.
4. Use Color Picker & Converter if you need HEX/RGB/HSL conversion for CSS tokens.

Common mistakes

• Testing only on pure white — also test dark mode tokens
• Passing large text but failing captions
• Relying on colour alone for errors (add icons/text)

Primary reference: W3C Understanding SC 1.4.3 Contrast (Minimum).