Accessible colors for canvas apps

Article
12/16/2022

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