Accessible colors for canvas apps in PowerApps

Colors used in a canvas app should be accessible to color-blind and low-vision users. All PowerApps themes are accessible by default. When modifying colors used in an app, follow these guidelines to ensure that they remain accessible. There are several tools available online which can help you identify color contrast issues.

Minimum contrast for text

  • Text and its background must have a contrast ratio of at least 4.5:1
  • Large text must have a contrast ratio of at least 3:1
  • Disabled text has no contrast requirements

In practical terms, all interactive controls must have adequate color contrast between:

Minimum contrast for non-text

Note

In the WCAG 2.0 standard, contrast requirements only applies to text. For greater accessibility, consider the upcoming WCAG 2.1 contrast guidelines for essential user interface components like icon buttons. A minimum ratio of 3:1 is recommended for these components. The guidelines descibed in this section are optional for WCAG 2.0 compliance.

User interface components

All interactive controls must have adequate color contrast between:

Additional color contrast checks apply for controls where the entire area is interactive or informative. For example, a Button or an Icon used as a button. This ensures that the boundaries of the control are clear and users know where they can click or tap.

If there is a border for such controls, there should be adequate color contrast between:

If there is no border, there should be adequate color contrast between:

Graphical objects

If an image conveys important information, consider checking it for contrast issues. This applies to controls where an image can be shown: Audio, Image, Microphone, and Video.

For video content, consider checking it for contrast issues. Alternatively or additionally, provide closed captions that describe the video.

Provide other visual cues

Ensure that the app does not convey information with just color. For example, users with red-green color blindness will not be able to distinguish a red error message from a green success message.

Additional cues like an Icon or text styles like Italic and Underline can help convey meaning.

Next steps

Learn about accessibility properties in PowerApps controls and try using the Accessibility checker.