iOS

⌘K
  2. Home
  4. Docs
  6. iOS
  8. Fundamentals
  10. Color Guidelines

Color Guidelines

Color Guidelines for iOS Development

Colors play a vital role in the design and user experience of iOS apps. Apple provides comprehensive guidelines to ensure consistency, accessibility, and visual appeal in iOS applications. Below are the key aspects of color usage in iOS development:

1. Apple’s Human Interface Guidelines (HIG) for Colors

Apple’s HIG provides specific recommendations for using colors effectively:

  • Use colors sparingly and intentionally.
  • Ensure high contrast between text and backgrounds for readability.
  • Avoid relying solely on color to convey information (use icons or text as well).
  • Align with the system’s default color palette for consistency.

2. System Colors

iOS offers a set of predefined system colors that adapt to light and dark modes, ensuring compatibility and consistency. These include:

Standard System Colors:

  • Label Colors:
    • label: Primary text.
    • secondaryLabel: Secondary text.
    • tertiaryLabel: Tertiary text.
    • quaternaryLabel: Subtle text.
  • Background Colors:
    • systemBackground: Background for standard interfaces.
    • secondarySystemBackground: Secondary-level content backgrounds.
    • tertiarySystemBackground: Tertiary-level content backgrounds.
  • Fill Colors:
    • systemFill: Fill for UI elements.
    • secondarySystemFill: Secondary-level fill elements.
    • tertiarySystemFill: Tertiary-level fill elements.
    • quaternarySystemFill: Subtle fill elements.
  • Separators and Grouped Backgrounds:
    • separator, opaqueSeparator
    • systemGroupedBackground, secondarySystemGroupedBackground, tertiarySystemGroupedBackground

3. Accent Colors

  • iOS apps can use accent colors to highlight primary interactive elements, like buttons and links.
  • Developers can customize the accent color in Xcode or use the default blue accent.

4. Dark Mode Considerations

  • iOS supports light and dark modes.
  • Use dynamic system colors (UIColor in Swift) that automatically adapt to the current appearance. Example: let dynamicColor = UIColor { traitCollection in return traitCollection.userInterfaceStyle == .dark ? .white : .black }

5. Accessibility and Contrast

  • Ensure sufficient contrast for text and interactive elements for readability.
  • Use tools like Accessibility Inspector in Xcode to test color contrast.
  • Follow WCAG (Web Content Accessibility Guidelines) standards:
    • Minimum contrast ratio: 4.5:1 for text.
    • Larger text (>18pt): 3:1 contrast ratio.

6. Semantic Colors

Use semantic colors for context-specific elements, which adapt to different themes and appearances:

  • systemRed: Error or destructive actions.
  • systemGreen: Positive or success actions.
  • systemBlue: Links or default interactive elements.
  • systemOrange, systemYellow, systemPink, etc., for categorization.

7. Custom Colors

  • Custom colors should be defined in the Assets Catalog in Xcode.
  • Use Color Sets for managing custom colors:
    • Add colors for light, dark, and high-contrast appearances.
    • Example: let customColor = UIColor(named: "MyCustomColor")

8. Gradients

  • iOS supports gradients for backgrounds or decorative elements.
  • Use CAGradientLayer to create gradients programmatically: let gradientLayer = CAGradientLayer() gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] gradientLayer.startPoint = CGPoint(x: 0, y: 0) gradientLayer.endPoint = CGPoint(x: 1, y: 1) view.layer.insertSublayer(gradientLayer, at: 0)

9. Do’s and Don’ts

Do’s:

  • Use system colors for standard UI elements.
  • Design with both light and dark modes in mind.
  • Test color contrast for accessibility.
  • Use color to create a visual hierarchy.

Don’ts:

  • Overuse bright or saturated colors.
  • Use color alone to convey information.
  • Hard-code colors that don’t adapt to appearance changes.

10. Resources and Tools

  • Apple Human Interface Guidelines: Official guidance on color usage.
  • Xcode Color Assets: Manage and test colors within Xcode.
  • Accessibility Inspector: Test contrast and accessibility compliance.

Conclusion

By adhering to iOS color guidelines, developers can create apps that are visually consistent, accessible, and adaptable to various user preferences and modes. System colors and dynamic color management ensure seamless integration with the iOS ecosystem while allowing room for customization.