9 min read · Try Color Picker
WCAG contrast basics
Normal text targets 4.5:1 contrast against its background; large text (18pt+ or 14pt bold) can use 3:1. UI components and focus indicators have their own criteria—do not test body copy only.
Semantic tokens
Name colors by role (--text-primary, --surface-elevated) not by value (--gray-500). Themes swap mappings for dark mode without hunting hex codes across hundreds of files.
Hue and saturation in HSL
Adjusting lightness in HSL keeps brand hue stable when tuning hover states. Copy HSL from a picker into tokens, then derive variants programmatically where possible.
Beyond sRGB
Wide-gamut displays and oklch() in modern CSS improve perceptual uniformity. Test fallbacks for older browsers if you adopt newer color spaces.
User preferences
Respect prefers-reduced-motion and forced-colors modes. High contrast is not only a palette choice—focus rings and border weights matter for keyboard users.
This article is part of the DevToolsHub learning guides—original writing meant to complement our free tools, not replace official documentation from vendors or standards bodies.