color-contrast

To fix color contrast issues for WCAG compliance, audit your project's color palette and update CSS color tokens to enforce thresholds like 4.5:1 for normal text and 3:1 for large text across light, dark, and forced-colors modes.

WCAG contrast requirements mandate a minimum 3:1 contrast ratio for non-text UI components, icons, and indicators to ensure visibility. This applies alongside the 4.5:1 threshold for standard text across all theme environments.

Yes, you can validate color contrast across light, dark, and forced-colors modes by systematically checking CSS color tokens. This ensures text and UI components maintain readable contrast thresholds for users with low vision in any theme.

Maintaining focus indicator visibility requires guiding safe CSS color token usage to preserve contrast thresholds. Systematic contrast validation ensures focus indicators remain visible and accessible across light, dark, and forced-colors environments.

The best way to audit a design system's color palette for accessibility is to perform systematic contrast validation on its CSS color tokens. This ensures all text, UI components, and icons meet WCAG 2.x thresholds across all display modes.