What is color contrast and why do WCAG levels matter for text and UI?

Contrast is the perceived difference in brightness between text (or a control) and what is behind it. WCAG gives minimum contrast ratios: for normal text, 4.5:1 is a common bar for Level AA, with higher requirements for some large text. Do not use color as the only signal for errors or status - add text or icons so color-blind users are not lost. In dark mode, the same hex may not meet contrast; re-check. Focus states need visible focus rings, not removed 'for aesthetics'.

/* check pairs with a contrast tool, not by eye only */
.button { color: #fff; background: #0d47a1; }
.muted  { color: #595959; } /* on white: may fail if too light */

Start simple: try this concept in a tiny project before moving to advanced tools.