Color & Contrast
Don't rely on color alone
Color should never be the only way to show meaning.
See it
Don't
- Error shown only by a red border
- No message saying what's wrong or how to fix it
Do
Email
jane@site
⚠ Add a domain ending, like jane@site.com
Password
••••••••
Why it matters
About 1 in 12 men has some color vision deficiency. Pair color with an icon and a text message that also says how to fix it.
How to apply it
- Pair error colors with an icon and a text message
- Add labels or patterns to charts
- Underline links inside body text
Common mistakes
- Red and green status dots with no labels
- Required fields shown only by a colored border
Quick answers
What is Don't rely on color alone?
Color should never be the only way to show meaning. About 1 in 12 men has some color vision deficiency. Pair color with an icon and a text message that also says how to fix it.
How do I apply Don't rely on color alone in UI design?
Pair error colors with an icon and a text message. Add labels or patterns to charts. Underline links inside body text.
What are common mistakes with Don't rely on color alone?
Red and green status dots with no labels. Required fields shown only by a colored border.