You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/2-color-contrast-accessibility-fundamentals.yml
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/3-review-accessibility-guidelines.yml
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/4-design-color-contrast-accessibility.yml
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/5-implement-color-contrast-accessibility.yml
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/6-test-color-contrast-accessibility.yml
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/includes/6-test-color-contrast-accessibility.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,12 +28,12 @@ Additionally, in Windows high-contrast mode, you can choose from four themes: Hi
28
28
29
29
:::image type="content" source="../media/color-contrast-testing-windows-high-contrast-modes.png" alt-text="Screenshot of view of the PowerPoint UI in four high-contrast Windows themes. The themes are labeled as High Contrast #1, High Contrast #2, High Contrast Black, and High Contrast White. Each theme alters the background, text, and interface colors to demonstrate how the presentation appears with different high-contrast settings. The slides contain a title text box and decorative elements, adjusted to match each theme's color scheme." lightbox="../media/color-contrast-testing-windows-high-contrast-modes.png":::
30
30
31
-
Mac OS and iOS operating systems support light and dark modes.
31
+
macOS and iOS operating systems support light and dark modes.
32
32
33
33
:::image type="content" source="../media/color-contrast-testing-mac-high-contrast-modes.png" alt-text="Screenshot of view of the PowerPoint UI in two Mac modes: Light Mode and Dark Mode. In Light Mode, the slide background is bright with dark text, while in Dark Mode, the background is dark with lighter text and interface elements. The comparison demonstrates how the presentation adapts to different color settings for better visibility and accessibility." lightbox="../media/color-contrast-testing-mac-high-contrast-modes.png":::
34
34
35
35
> [!NOTE]
36
-
> Mac OS has some contrast problems that make it challenging to see certain elements clearly. The Increased Contrast setting is off by default, but turning it on will improve the contrast for the operating system and in many apps. It will also turn on the "Reduce Transparency" setting. Before testing for contrast, ensure the "Increase Contrast" setting is turned on. To do this, go to System Settings > Accessibility > Display. Then, turn on the "Increase Contrast" setting.
36
+
> macOS has some contrast problems that make it challenging to see certain elements clearly. The Increased Contrast setting is off by default, but turning it on will improve the contrast for the operating system and in many apps. It will also turn on the "Reduce Transparency" setting. Before testing for contrast, ensure the "Increase Contrast" setting is turned on. To do this, go to System Settings > Accessibility > Display. Then, turn on the "Increase Contrast" setting.
37
37
38
38
### Exercise 1
39
39
@@ -56,7 +56,7 @@ Contrast of Color Pairs
56
56
57
57
:::image type="content" source="../media/power-point-insert-new-slide-button-focused.png" alt-text="Screenshot of the Microsoft PowerPoint button to insert a new slide." lightbox="../media/power-point-insert-new-slide-button-focused.png":::
58
58
59
-
All five instances pass the 3:1 contrast ratio requirement for UI components. Although the contrast for the interior and exterior fills are low, they both have sufficient contrast with the border that separates them.
59
+
All five instances pass the 3:1 contrast ratio requirement for UI components. Although the contrasts for the interior and exterior fills are low, they both have sufficient contrast with the border that separates them.
60
60
61
61
A keyboard focus visual indicator appears when we place the keyboard focus on this icon. The visual indicator is also important for meaning, so the contrast requirement also applies to it. We need to check the color contrast between the color of the focus border and the exterior fill color next to it.
Copy file name to clipboardExpand all lines: learn-pr/cela-accessibility/develop-products-with-accessible-color-contrast/index.yml
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ summary: |
14
14
Understanding color and contrast are essential for accessibility in digital products like apps and websites. It ensures that content is readable and navigable for all users, including those with visual impairments, promoting an inclusive online experience.
15
15
In this module, you learn the importance of color and contrast in digital design for accessibility. You cover key principles and requirements, including contrast ratios and user interface (UI) components. You recall essential considerations, apply practical tips for high-contrast needs, and identify tools for testing color contrast across all control states and themes.
16
16
abstract: |
17
-
By the end of this module, you're be able to:
17
+
By the end of this module, you'll be able to:
18
18
- Explain the importance of color and contrast in accessible design
19
19
- Identify the accessibility principles and requirements related to color and contrast
20
20
- Recall the key considerations for using color and contrast in the design of digital products
0 commit comments