Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Color and Typography

Use System Colors to Integrate with System Appearances

The system colors are designed to look good in the system-defined appearances. For example, in a menu or a popover, the system colors automatically adapt to the view’s vibrant light appearance, blending in the colors from the window content behind the view. Similarly, many system colors, such as textColor and controlTextColor, automatically look great in the vibrant dark appearance of Notification Center. When you use system-provided colors instead of custom colors, you don’t have to worry about how the colors will look in different contexts.

The Finder sidebar is another example of a vibrant light appearance: In this case, the system blends in colors from behind the window.

image: ../Art/vibrant_sidebar_2x.png

Meet users’ expectations and prepare for vibrancy. Vibrancy and translucency affect all apps—even ones that don’t display any translucent or vibrant views—because some elements, such as menus, are vibrant by default. When you adopt vibrancy in your app, use system-provided colors and template images instead of custom colors and full-color images so that your views look great in vibrant and translucent contexts. (If you choose to display nonvibrant content, make sure you opt out of vibrancy; for example, by specifying NSAppearanceNameAqua.)

Use system-provided label colors to communicate the relative importance of content. macOS defines four colors that use different levels of contrast to imply different levels of importance. Although the colors listed here are known as label colors, they can also be used with nontext elements.

  • labelColor

  • secondaryLabelColor

  • tertiaryLabelColor

  • quaternaryLabelColor

In the examples here, you can see the same four label colors as they appear in light and dark vibrant contexts.

image: ../Art/label_colors_on_light_2x.png
image: ../Art/label_colors_on_dark_2x.png

For example, Mail uses labelColor to display the sender and subject of a message, because these items represent the most important content in the message list. To display the horizontal lines between messages, which represent the least important content, Mail uses quaternaryLabelColor.

Pay attention to the semantic meanings of system colors. In addition to several literal colors, such as redColor and blueColor, macOS provides many colors for specific purposes, such as controlTextColor and selectedTextColor. When you use a system color according to its semantic meaning, your UI continues to look good and make sense when macOS updates its appearance.

Pay attention to color contrast in different contexts. For example, if there’s not enough contrast between foreground and background elements, they may be hard for users to see. A quick but unscientific way to find out if your colors have sufficient contrast is to view your app in different lighting conditions, including in direct sunlight.

Although viewing your app in different lighting conditions can help you find some of the areas you need to work on, it's no substitute for a more objective approach that yields reliable results. A better method involves determining the ratio between the luminance values of the foreground and background colors. To get this ratio, use an online contrast ratio calculator or perform the calculation yourself using the formula established in the WCAG 2.0 standard. Ideally, the color contrast ratio in your app is 4.5:1 or higher.

Text Should Always Be Legible

San Francisco is the system font in macOS. This font is optimized to give your text unmatched legibility, clarity, and consistency. There are two variants of this font: SF UI Text for text 19 points or smaller, and SF UI Display for text 20 points or larger. When you use the system font for text in labels and other interface elements, macOS automatically applies the most appropriate text style of the font based on the point size. It also switches fonts automatically as needed and respects accessibility settings. Download the San Francisco fonts here.