Breyta

Deila með


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:

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:

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

Show or hide content from assistive technologies for canvas apps

See also