Merge pull request #369 from tahoon-ms/color-contrast

Add in-depth color contrast guidelines

Author: rjagiewich

powerapps-docs/maker/TOC.yml

@@ -133,6 +133,9 @@
         href: ./canvas-apps/global-apps.md
       - name: Create an accessible app
         href: ./canvas-apps/accessible-apps.md
+        items:
+          - name: Color
+            href: ./canvas-apps/accessible-apps-color.md
     - name: Manage your app
       items:
       - name: Introduction to powerapps.com

powerapps-docs/maker/canvas-apps/accessible-apps-color.md

@@ -0,0 +1,63 @@
+---
+title: Accessible colors in PowerApps | Microsoft Docs
+description: Color contrast guidelines for PowerApps
+services: ''
+suite: powerapps
+documentationcenter: na
+author: tahoon
+manager: anneta
+editor: ''
+tags: ''
+
+ms.service: powerapps
+ms.devlang: na
+ms.topic: article
+ms.tgt_pltfrm: na
+ms.workload: na
+ms.date: 04/23/2018
+ms.author: tahoon
+
+---
+# Accessible colors in PowerApps
+Colors used in an 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.
+
+## 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](controls/properties-color-border.md)** and **[Fill](controls/properties-color-border.md)**
+* **[PressedColor](controls/properties-color-border.md)** and **[PressedFill](controls/properties-color-border.md)**
+* **[HoverColor](controls/properties-color-border.md)** and **[HoverFill](controls/properties-color-border.md)**
+
+## Minimum contrast for non-text
+
+> [!NOTE]
+> In the [WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) standard, contrast requirements only applies to text. For greater accessibility, consider the upcoming [WCAG 2.1 contrast guidelines](https://www.w3.org/TR/WCAG21/#non-text-contrast) 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](controls/properties-color-border.md)** and color outside the control
+
+Additional color contrast checks apply for controls where the entire area is interactive or informative. For example, a **[Button](controls/control-button.md)** or an **[Icon](controls/control-shapes-icons.md)** 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](controls/properties-color-border.md)** and color outside the control
+* **[PressedBorderColor](controls/properties-color-border.md)** and color outside the control
+* **[HoverBorderColor](controls/properties-color-border.md)** and color outside the control
+
+If there is no border, there should be adequate color contrast between:
+* **[Fill](controls/properties-color-border.md)** and color outside the control
+* **[PressedFill](controls/properties-color-border.md)** and color outside the control
+* **[HoverFill](controls/properties-color-border.md)** 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](controls/control-audio-video.md)**, **[Image](controls/control-image.md)**, **[Microphone](controls/control-microphone.md)**, and **[Video](controls/control-audio-video.md)**.
+
+For video content, consider checking it for contrast issues. Alternatively or additionally, provide [closed captions](controls/control-audio-video.md) 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](controls/control-shapes-icons.md)** or text styles like **[Italic](controls/properties-text.md)** and **[Underline](controls/properties-text.md)** can help convey meaning.

powerapps-docs/maker/canvas-apps/controls/control-attachments.md

@@ -107,7 +107,7 @@ There must be adequate color contrast between:
 * **MaxAttachmentsColor** and **Fill**
 * **NoAttachmentsColor** and **Fill**
 
-This is in addition to the standard color contrast requirements.
+This is in addition to the [standard color contrast requirements](../accessible-apps-color.md).
 
 ### Screen reader support
 The following properties must be present:

powerapps-docs/maker/canvas-apps/controls/control-button.md

@@ -183,7 +183,7 @@ You can also specify the color of a **Button** control by setting its **[HoverFi
 
 ## Accessibility guidelines
 ### Color contrast
-* Standard color contrast requirements apply.
+* [Standard color contrast requirements](../accessible-apps-color.md) apply.
 
 ### Screen reader support
 * **[Text](properties-core.md)** must be present.

powerapps-docs/maker/canvas-apps/controls/control-check-box.md

@@ -140,7 +140,7 @@ There must be adequate color contrast between:
 * **CheckboxBackgroundFill** and **[PressedFill](properties-color-border.md)**
 * **CheckboxBackgroundFill** and **[HoverFill](properties-color-border.md)**
 
-This is in addition to the standard color contrast requirements.
+This is in addition to the [standard color contrast requirements](../accessible-apps-color.md).
 
 ### Screen reader support
 * **[Text](properties-core.md)** must be present.

powerapps-docs/maker/canvas-apps/controls/control-combo-box.md

@@ -98,7 +98,7 @@ There must be adequate color contrast between:
 * **SelectionFill** and **[Fill](properties-color-border.md)**
 * **SelectionTagColor** and **SelectionTagFill**
 
-This is in addition to the standard color contrast requirements.
+This is in addition to the [standard color contrast requirements](../accessible-apps-color.md).
 
 ### Screen reader support
 * **[AccessibleLabel](properties-accessibility.md)** must be present.

powerapps-docs/maker/canvas-apps/controls/control-data-table.md

@@ -149,7 +149,7 @@ There must be adequate color contrast between:
 * **SelectedColor** and **SelectedFill**
 * [**HoverColor**](properties-color-border.md) and [**HoverFill**](properties-color-border.md)
 
-This is in addition to the standard color contrast requirements.
+This is in addition to the [standard color contrast requirements](../accessible-apps-color.md).
 
 ### Screen reader support
 * **NoDataText** must be present.

powerapps-docs/maker/canvas-apps/controls/control-date-picker.md

@@ -111,7 +111,7 @@ If you add a **Date Picker** control instead of a **[Text input](control-text-in
 
 ## Accessibility guidelines
 ### Color contrast
-* Standard color contrast requirements apply.
+* [Standard color contrast requirements](../accessible-apps-color.md) apply.
 
 ### Screen reader support
 * **[AccessibleLabel](properties-accessibility.md)** must be present.

powerapps-docs/maker/canvas-apps/controls/control-drop-down.md

@@ -143,7 +143,7 @@ There must be adequate color contrast between:
 * **SelectionColor** and **SelectionFill**
 * **SelectionFill** and **[Fill](properties-color-border.md)**
 
-This is in addition to the standard color contrast requirements.
+This is in addition to the [standard color contrast requirements](../accessible-apps-color.md).
 
 ### Screen reader support
 * **[AccessibleLabel](properties-accessibility.md)** must be present.

powerapps-docs/maker/canvas-apps/controls/control-image.md

@@ -134,7 +134,7 @@ If you add one or more **Image** controls to your app, you can show individual i
 
 ## Accessibility guidelines
 ### Color contrast
-* Standard color contrast requirements apply, if the graphic is used as a button.
+* [Standard color contrast requirements](../accessible-apps-color.md) apply, if the graphic is used as a button.
 * Consider checking for contrast issues within the image, if it is not purely decorative.
 
 ### Screen reader support