After reviewing hundreds of codebases, I can tell you that color-related mistakes are among the most common issues I find. They rarely crash anything — a slightly wrong shade will not break your app — but they accumulate into an unprofessional impression that undermines trust. Here are the mistakes I see most often.
Hardcoding Colors Everywhere
This is the number one offender. A developer types #3B82F6 directly into a CSS rule. Then types it again in another file, but as #3b82f6. Then a teammate uses #3A82F5 — off by one hex digit. Over time, five or six versions of the same blue accumulate, creating subtle visual inconsistencies. The fix is defining every color as a CSS custom property in one central location:
:root { --primary: #3B82F6; --primary-dark: #2563EB; --success: #10B981; --error: #EF4444; --text: #1F2937; }
Reference var(--primary) everywhere. Updates happen once, apply globally, and typos become impossible.
Ignoring Contrast Ratios
This mistake has real consequences beyond aesthetics. Light gray text on white might look elegant on a calibrated monitor in a dim studio but becomes unreadable on a laptop in sunlight. WCAG specifies 4.5:1 contrast for normal text. Common violations include placeholder text that is too light, border colors that disappear at certain brightnesses, and disabled button text that is literally invisible to some users. Every text element needs testing — body copy, labels, captions, footnotes, navigation items, everything.
Using Pure Black for Text
Pure black #000000 on pure white #FFFFFF has maximum 21:1 contrast, which actually exceeds comfortable reading levels. The harshness causes eye fatigue on high-resolution OLED screens where black pixels are literally turned off, creating stark edges. Nearly every well-designed website uses dark gray instead — #1F2937 or #111827 are dark enough for excellent readability while being noticeably more comfortable for extended reading sessions.
Forgetting Dark Mode
A palette designed for light mode breaks in dark mode. Brand blue that pops against white becomes invisible on dark gray. Success green blends into dark surfaces. The fix is designing both palettes simultaneously. Primary colors shift lighter. Backgrounds need multiple dark steps for depth layering. Use CSS custom properties with @media (prefers-color-scheme: dark) queries:
@media (prefers-color-scheme: dark) { :root { --text: #E2E8F0; --bg: #0F172A; --primary: #60A5FA; } }
Test both modes with equal diligence. Many teams build light mode first and check dark mode as an afterthought, resulting in embarrassing bugs that only surface when users enable their preferred theme.