Guide
Common color mistakes in web design
A few recurring color mistakes quietly hurt readability and trust. Here is what to watch for and how to fix each.
1. Low-contrast text
Light grey on white looks elegant but often fails AA. Fix: darken the text until it reaches at least 4.5:1.
2. Too many accents
When everything is colorful, nothing stands out. Fix: pick one accent and reserve it for key actions.
3. Pure black on pure white
Maximum contrast can feel harsh. Fix: use a very dark grey for text and an off-white background.
4. Relying on color alone
Color-only states fail for color-blind users. Fix: add icons or text labels.
5. Skipping dark-mode contrast
Colors that pass on light backgrounds can fail on dark. Fix: re-check every pairing in both themes with the contrast checker.
Frequently asked questions
Why does my grey text fail accessibility?
Light grey on white often drops below 4.5:1. Darken it until the contrast checker shows an AA pass for body text.
How many accent colors should I use?
Usually one. Reserve it for important actions so it keeps its impact and the interface stays scannable.