Color & Contrast
How to choose colors that look good and work for everyone.
Color is one of the first things people notice about your site. Bad color choices make your app look unprofessional and can make it unusable for people with vision differences.
Contrast ratios
Contrast is the difference in brightness between text and its background. Low contrast = hard to read.
- Dark text on light background (or vice versa) - Contrast ratio of 4.5:1 or higher for body text - Contrast ratio of 3:1 or higher for large text (24px+)
- Light gray text on white background - Low-contrast placeholder text as labels - Colored text on similarly-colored background
Failing contrast checks is one of the most common accessibility issues. Fix contrast and your score jumps.
Check your contrast: Use the WebAIM Contrast Checker to test your color pairs.
Color meaning
Don't rely on color alone to communicate something. Not everyone sees colors the same way.
- Red error message with an X icon and "Error" text - Green success with a checkmark and "Saved" text - Required fields marked with an asterisk, not just red
- Red border on invalid fields with no error message - Green/red dots with no labels - "Click the blue button" in instructions
Dark mode
If your app supports dark mode, test both modes:
- All text passes contrast in both light and dark mode - Colors adjust for each mode (not just inverted) - Images and icons are visible in both modes
- White text on light yellow background in dark mode - Black icons invisible on dark background
- One mode looks great, the other is broken
Picking a color palette
Keep it simple:
- One primary color — your brand color, used for buttons and links
- One or two neutral colors — grays for text, borders, backgrounds
- Semantic colors — red for errors, green for success, yellow for warnings
That's it. You don't need 12 colors.
Having too many colors doesn't hurt your score much, but inconsistent color usage does. Pick a palette and stick to it.