Frontend Color Checklist Before Shipping a Website
Before launch, color QA should cover contrast, hover states, dark mode, focus rings, charts, forms and brand consistency.
Focus and selection states
:focus-visible {
outline: 3px solid #60a5fa;
outline-offset: 2px;
}
::selection {
background: #bfdbfe;
color: #0f172a;
}Developer checklist
- Check contrast on mobile and desktop.
- Verify focus rings for keyboard users.
- Test dark mode and reduced transparency areas.
- Avoid relying only on color in forms and alerts.