What is Color Contrast?

Color contrast is the difference in luminance or color that makes elements distinguishable, crucial for readability and accessibility.

When to use strong Color Contrast?

- Text over backgrounds and interactive controls

- Low‑light modes and outdoor visibilityWhen not to rely on color alone? - State indication should include shape, text, or icons as wellWhat is the anatomy of Color Contrast?

- WCAG ratios: 4.5:1 for normal text, 3:1 for large text

- Contrast with states: hover, focus, disabled

- Testing tools and color‑blind safe palettes