Color and Contrast

Don’t rely solely on color to differentiate between objects or communicate important information. If your app uses color to convey information, be sure to provide text labels or glyph shapes so colorblind users can understand it as well.

Prefer system colors for text. When you color text using the colors defined by UIColor or NSColor, the text responds correctly to accessibility settings such as Invert Colors and Increase Contrast.

Be aware of colorblindness. Many colorblind people find it difficult to distinguish blue from orange, for example, or red from green (and either red or green from gray). 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.

Screenshot of the History view of the Activity app. The default colors of red, green, and blue are visible.

As seen without colorblindness.

Screenshot of the History view of the Activity app. The color red is replaced by dark gray, green is replaced by yellow, and blue is replaced by light gray.

As seen with red-green colorblindness.

Respond correctly to Invert Colors. People can turn on Invert Colors when they prefer to view items on a dark background. In the Smart Invert mode of Invert Colors, images, video, and full-color icons (such as app icons and nontemplate images) don’t invert, and dark UI stays dark.

Use strongly contrasting colors to improve readability. Many factors affect the perception of color, including font size and weight, color brightness, screen resolution, and lighting conditions. When you increase color contrast of visual elements like text, glyphs, and controls, you can help more people use your app in more situations. To find out if the contrast of adjacent colors in your UI meets minimum acceptable levels, use an online color calculator based on the Web Content Accessibility Guidelines (WCAG) color contrast formula.

Use text size to help determine contrast. In general, smaller or lighter-weight text needs to have greater contrast to be legible. Use the following values for guidance.

Text size Text weight Minimum contrast ratio
Up to 17 pt Any 4.5:1
18 pt and larger Any 3:1
Any Bold 3:1

To learn more making text in your app accessible to all users, see Text Size and Weight.