WCAG Color Contrast Checklist for UI Designers
WCAG contrast ratios help ensure text and UI controls are readable for all users. Use this checklist to hit AA or AAA compliance while designing UI palettes.
Quick checklist:
- Normal text: 4.5:1 contrast (AA)
- Large text: 3:1 contrast (AA)
- UI components and icons: 3:1 minimum
- Test light and dark mode variants
Design with accessibility in mind
Use accessible color palettes early to avoid rework. Aim for AA compliance for most product interfaces and AAA when building for regulated industries.
Validate contrast quickly
Run your color pairs through Color Architect to calculate ratios, verify WCAG levels, and generate compliant palettes.
Check Contrast Ratios Instantly
Use Color Architect to test palettes and build accessible UI colors.
Open Color Architect →