Design Principles: The Importance of Color

The Importance of Color

• Color is an integral part of design, used to attract attention, assign brand, communicate meaning, and group elements.
• However, if not used properly, color can create barriers for people with disabilities.

Color as Meaning

• Avoid using color alone to present information or to request an action.
• Example: a user list from a chat application, where green Wi-Fi icons indicate active, orange icons indicate idle, and red icons indicate offline - 1 in 12 men and 1 in 200 women who are color-blind may struggle to distinguish between the statuses.
• Instead, use different icons with color complementing the information conveyed by each icon.

Color Contrast

• Ensure a contrast ratio of at least 4.5 to 1 between text color and background.
• If font is at least 24 px or 19 px bold, the minimum contrast ratio drops to 3 to 1.
• Examples of acceptable colors:
  • On a white background, the lightest gray is #959595 for text 24 px or larger.
  • On a white background, the lightest gray is #767676 for smaller text.
  • On a gray background, the text needs to be darker.

Text on Top of Non-Solid Backgrounds

• Ensure text meets color contrast requirements on the part of the image closest to the text color.
• However, text on non-solid backgrounds can negatively affect users with cognitive disabilities such as dyslexia.
• Solution: place text on a solid portion of the image or add a solid background between the text and the image.

Improve User Experience with Animations

• Animations can improve the experience for users with cognitive disabilities.
• However, improperly designed animations can cause headaches, nausea, dizziness, or vertigo for users with vestibular disorders, and even seizures for people with photosensitive epilepsy.
• Allow users to turn off animations, and avoid animation styles that can cause negative health effects.

Avoid Triggering Dizziness

• Three factors can contribute to triggering dizziness, headaches, or discomfort: animation styles, vestibular disorders, and photosensitive epilepsy.