Harmony and readability differ
A palette can look harmonious while foreground and background values have insufficient luminance contrast. Evaluate the exact pair used for text, icons, controls, focus indicators, and state—not merely the individual swatches.
Do not rely on colour alone
Errors, success, selected state, and chart categories should include another cue such as text, an icon, a pattern, shape, or position. This helps people with colour-vision differences and also improves understanding in glare, grayscale, or poor displays.
Test the complete component
Gradients and photographs make contrast vary across the same line of text. Test normal, hover, focus, disabled, and error states with real font sizes and weights. WCAG guidance commonly requires at least 4.5:1 for normal text and 3:1 for qualifying large text, with defined exceptions.
- Assign semantic roles
- Test actual pairings
- Preserve a visible keyboard focus cue
- Check without colour
- Recheck after theme changes
References and further reading
These primary or authoritative references support standards-dependent details. LipiCode’s explanations and examples are independently written for this workflow.