Color & Contrast: Designing with Visibility in Mind
Color is a powerful design tool—but when used without accessibility in mind, it can exclude users with visual impairments, color blindness, or age-related vision changes. Ensuring sufficient contrast and avoiding color-only cues helps make your content usable for everyone.
Why Color & Contrast Matter
- Users with low vision may struggle to read low-contrast text.
- Users with color blindness may not distinguish between certain colors (e.g., red vs. green).
- Aging users or those in poor lighting conditions may also have reduced color perception.
Accessible design means information must be perceivable without relying on color alone.
Ensure Sufficient Contrast Ratios
Contrast ratio refers to the difference in luminance between foreground (e.g., text) and background.
WCAG Minimum Contrast Requirements:
| Text Type | Minimum Ratio | Recommended |
|---|---|---|
| Normal text (body copy) | 4.5:1 | 7:1 |
| Large text (18pt+, or bold 14pt+) | 3:1 | 4.5:1 |
| UI elements / graphics | 3:1 | 4.5:1 |
How to Check:
- Use tools like WebAIM Contrast Checker or Siteimprove
- Siteimprove has a browser extension as well! You can get Siteimprove Accessibility Checker here.
- Test against different devices and lighting conditions.
Avoid Using Color as the Only Means of Conveying Information
Relying on color alone creates a barrier for users who can’t perceive color differences. Always pair color indicators with text, symbols, or patterns.
Bad Example:
Required fields are marked in red.
Better Example:
Required fields are marked with a red asterisk (*)
Visual Example:
- Instead of a traffic light graphic (red = stop, green = go), include labels or iconography.
- For error messages, include an icon or bold text (e.g., ❗ Error: Please complete all fields.)
Be Mindful of Color Choices
- Avoid red/green or blue/purple combinations without additional cues.
- Stick to high-contrast, readable combinations like:
- Black on white
- Dark blue on light yellow
- White on dark gray
Tip: Simulate color blindness with tools like Coblis or Chrome’s DevTools (Rendering → Emulate vision deficiencies).
Color in Charts & Infographics
Charts and infographics often rely on color to convey meaning. Make them accessible by:
- Using patterns or textures in addition to color
- Adding labels or annotations directly on data points
- Including a text summary or table version of the chart data
Quick Checklist
✅ Body text has a contrast ratio of at least 4.5:1
✅ Large or bold text has at least 3:1 contrast
✅ Color is never the only way information is conveyed
✅ Charts use labels or patterns in addition to color
✅ Color choices work for users with color blindness
✅ Contrast is tested using WCAG-compliant tools