Color contrast

Overview

When designing a color palette for accessibility in web and digital design, the most important factors are clarity, contrast, and consistency to ensure inclusivity for users with visual impairments, including color blindness and low vision. Here’s a breakdown of key considerations:

1. Color Contrast

• Minimum contrast ratio: Follow WCAG (Web Content Accessibility Guidelines) standards:
• 4.5:1 for normal text
• 3:1 for large text (18 or 14pt bold)
• 3:1 for UI components (e.g., buttons, input borders)

2. Avoid Reliance on Color Alone

• Don’t use color as the only way to convey meaning. Use icons, patterns, or text labels in addition to red/green to indicate errors or success.

3. Color Blindness Considerations

• Use color palettes distinguishable by people with common types of color blindness (like Deuteranopia or Protanopia).

4. Semantic Color Use

• Be consistent in how you use colors across your site.
• Examples:
• Red = error or warning
• Green = success
• Blue = link or primary action.

5. Background and Text Color Pairing

• Avoid low-contrast light-on-light or dark-on-dark combinations.
• Ensure text is legible over background images or gradients by adding overlays and using solid backgrounds behind text.

6. Theme Flexibility

• Consider users who may use high-contrast modes or dark mode. Build palettes that adapt well to both light and dark themes.

Penn Medicine color standards for accessibility

The Penn Medicine digital design system has been built for compliance with WCAG AA 2.1 accessibility requirements. Adoption of the design system is the best way to ensure compliance.

The following specific standards for color contrast can also be found in the color standards section of our design standards.

Guidance resources:

• UPenn Accessibility Resources
• W3C Web Accessibility Fundamentals
• WCAG 2 Standards
• Full WCAG 2.1 guidelines

Last updated