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 color blind 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 color blindness. 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.

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

As seen without color blindness.

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 color blindness.

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 sufficient color contrast ratios. Strong contrast between elements in your app makes your content easier to perceive. An online color contrast calculator can help you accurately analyze the color contrast in your app to ensure that it meets optimal standards. Although you should use a minimum contrast ratio of 4.5:1, strive for a ratio of 7:1, because it meets more stringent accessibility standards.

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.