Accessible colors for canvas apps
Colors used in a canvas app should be accessible to color-blind and low-vision users. All Power Apps 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:
- Color and Fill
- PressedColor and PressedFill
- HoverColor and HoverFill
Minimum contrast for non-text
- Non-text components, such as icons and borders, must have a contrast ratio of at least 3:1 with the colors outside of them.
- Disabled and decorative components have no contrast requirements.
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
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
Show or hide content from assistive technologies for canvas apps