📖 Step 3: Design - UI Components & Patterns#86 / 291
Color Contrast
Color Contrast
📖One-line summary
Luminance difference between text and background — accessibility requires at least 4.5:1.
✨Example
Contrast between text and background
Bad ✕
Hard to read
Good ✓
Easy to read
Bad ✕
Low contrast
Good ✓
High contrast
⚡Vibe coding prompt examples
>_
Audit current designs for color contrast against WCAG. Calculate contrast ratios for text/background combinations and flag violations.
>_
Suggest color combinations that meet accessibility while preserving the brand color. Hit at least 4.5:1 for body text and 3:1 for large text.
>_
Build a color contrast checker utility function. Take two color codes and return whether they pass WCAG AA/AAA.
Try these prompts in your AI coding assistant!