Color

The Apple TV platform is designed to be lightweight and unobtrusive. Make colors contribute to the immersive experience, drawing people into content rather than the interface around it. When choosing how and where to use color in your app, consider whether it enhances the content.

In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Preview your app’s colors on both HD and 4K TVs. Colors you see on your computer don’t always look the same on a TV screen. Always test colors on actual televisions to understand how your color choices translate to the big screen.

Preview colors at various display levels. Colors on a TV vary depending on the manufacturer, brightness, and display settings. If some settings cause your content to blend together or become difficult to see, rethink how you use color.

Be aware of colorblindness. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to view for everyone. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

Show focus through more than just color. Subtle scaling and responsive animation are the primary ways to denote interactivity on Apple TV when an element is in focus.

Test your app with the dark appearance enabled. People can switch from the default light appearance to a dark appearance to create a deeper cinematic experience. When enabled, this mode swaps light system backgrounds and standard interface elements with dark equivalents, and shows light system text in place of dark system text. Make sure your app looks great with both the light and dark appearances. If necessary, provide two versions of your images, content, and custom interface elements, and display the appropriate version based on the current appearance setting.

Color Management

Apply color profiles to your images. Color profiles help ensure that your app's colors appear as expected on different TVs. The Standard RGB (sRGB) color space produces accurate colors on most televisions.

Use wide color to enhance the visual experience on 4K TVs. 4K televisions support a wide gamut P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format. Note that a computer with a wide color display is needed to design wide color images and select P3 colors.

Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear as expected when displayed on HD TVs in sRGB. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they're viewed in sRGB. Gradients that use colors in the P3 spectrum can also sometimes appear clipped in sRGB. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both HD and 4K screens.

Tip On Macs with wide color displays, you can use the system color picker to select and preview P3 colors, and to compare them with sRGB colors.