1. Using Pure Black text on Pure White backgrounds
The Mistake: Setting color: #000000; on a background: #FFFFFF;.
The Fix: This creates excessive contrast that can cause eye strain and "visual vibration" for readers. Soften it by using a dark gray like #1F2937 (Tailwind's gray-800) or #333333.
2. Relying on Color Alone for State
The Mistake: Showing an error state only by changing the border color to red.
The Fix: Colorblind users (approx 1 in 12 men) may not see the difference. Always add an icon (like an exclamation mark) or a text label ("Invalid email address") alongside the color change.
3. Not Checking Contrast Ratios
The Mistake: Putting white text on a light orange button because it "looks nice."
The Fix: "Looking nice" doesn't matter if it's unreadable. Use a contrast checker. White text on orange often fails WCAG AA standards. You likely need to use dark text on light/bright backgrounds.
4. Too Many Colors
The Mistake: Using 5 different shades of blue and 3 different greens across the app.
The Fix: Constrain your palette. Define a design system with a specific set of primary, secondary, and neutral colors. If you need a variation, use opacity or a predefined shade from your system, not a random hex code.
5. Ignoring Dark Mode
The Mistake: Inverting colors mathematically (white becomes black) without manual adjustment.
The Fix: Dark mode requires its own palette. Saturated colors need to be muted. Shadows don't work, so you need to use lighter background shades to indicate elevation. See our Dark Mode Guide for more.