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
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:
- FocusedBorderColor and color outside the control
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:
- BorderColor and color outside the control
- PressedBorderColor and color outside the control
- HoverBorderColor and color outside the control
If there is no border, there should be adequate color contrast between:
- Fill and color outside the control
- PressedFill and color outside the control
- HoverFill and color outside the control
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.
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.