App Store Connect Help

Support / App Store Connect / Manage app accessibility / Differentiate Without Color Alone evaluation criteria

Manage app accessibility

Differentiate Without Color Alone evaluation criteria

iOS macOS tvOS visionOS watchOS

Description

Users shouldn't have to rely on color to distinguish different selection states or values in an app. Instead, apps should use additional methods beyond color, such as text labels or icons, to convey information to users with common forms of color blindness.

Goals

Everyone should be able to use your app, regardless of whether they have a disability. The goal is to ensure that your app doesn’t exclude users who may not be able to perceive all colors. Color blindness is one of the most common forms of disability, affecting up to 10% of some populations.

Color is extremely useful in communicating information quickly. Don’t remove color from your app to support this capability; just make sure color isn’t the only way you’re conveying information.

The following sections provide more detail about how to determine whether your app supports Differentiate Without Color Alone well. The goal is to help ensure users with disabilities can leverage all common tasks of the app, therefore performing this evaluation will help you determine whether to indicate your app Supports Differentiate Without Color Alone on the App Store.

Getting started with testing

A great way to evaluate your app is to try testing using the Grayscale color filter in Accessibility Display settings. While this's not a representation of what color-blind users see, it's a good way to discover unanticipated problems with the use of color in your app. If you can’t use your own app in grayscale, rethink your app’s design and differentiate without color alone.

Ideally, your app should be designed by default to convey information using more than color alone. Using a setting to invoke this experience should be a last resort or stop-gap solution until your app's reliance on color can be improved.

Indicating support for Differentiate Without Color Alone

You may indicate your app supports Differentiate Without Color Alone if the common tasks of your app don't rely on color as the only way to convey information. For example, a game may distinguish teams using symbols, in addition to representing them with colors. If your app does use color as the only differentiator (e.g. color-coded charts), make sure that users can customize the design for their needs with a setting or by choosing multiple color schemes.

  • Consider where your elements, controls, or content rely solely on color to differentiate or communicate key information. Examples include status buttons or icons whose only distinguishing difference is red 🔴 vs green 🟢 to indicate positive or negative, online or offline. This visual difference may not be easy for people with red-green color-blindness to perceive.

  • Instead of relying on color alone, consider using placement, order, shape, iconography, or other stylistic differences in addition to color. Differences like a red square 🟥 or green circle 🟢 are perceivable by all sighted users, regardless of color perception ability.

  • Consider allowing multiple color schemes so users can avoid the problematic color combinations they have difficulty distinguishing. One example is in apps and games where color is used to indicate different teams or characters.

  • In complex charts or data visualization apps, consider arranging the chart colors in the same order as the legend keys. Alternatively, you can provide options for in-chart iconography or labels on each element directly to help communicate the data.

    Note: These differences reduce cognitive load and help users of all abilities remember what each color means.

    Example of inaccessible status indicators: two circles differentiated only by color, green and red.
    For Someone with red-green color blindness, these indicators might appear the same.
    Example of accessible status indicators: a green circled checkmark glyph and a red octagon containing an 'X'. This design uses both color and shape to differentiate.
    Both visual indicators and color help differentiate between indicators.
  • If third-party or user-generated content is required in your common tasks, refer to the detailed guidance for third-party content on the Overview of Accessibility Nutrition Labels.

Even after you’re able to indicate support for Differentiate Without Color Alone in the common tasks of your app, there are likely further improvements you’ll be able to make to the accessibility of your app. Re-evaluate your app’s support for Differentiate Without Color Alone every time you update the app. Set a goal to make your app more accessible to more people in every release.

Related

Human Interface Guidelines > Vision > Convey information with more than color alone

Watch “Make your app visually accessible”