:::image type="icon" source="images/sys-color/aquatic-color-graytext.png"::: :::image type="icon" source="images/sys-color/aquatic-color-hotlight.png"::: Headings, body copy, lists, placeholder text, app and window borders, any UI that can't be interacted with.
:::image type="icon" source="images/sys-color/aquatic-color-windowtext.png"::: :::image type="icon" source="images/sys-color/aquatic-color-window.png":::īackground of pages, panes, popups, and windows. Each SystemColor resource is a variable that automatically updates the color when the user switches contrast themes. This table shows the contrast theme colors and their recommended pairings. :::image type="content" border="false" source="images/contrast-theme-resources.png" alt-text="Settings - Edit theme dialog for the Aquatic contrast theme."::: The following image shows the Edit theme dialog for the Aquatic contrast theme.
:::image type="content" border="false" source="images/contrast-theme-settings.png" alt-text="Contrast theme settings.":::Īfter the user selects an option, they can choose to immediately apply it, or they can edit the theme. On the Settings > Ease of access > Contrast themes page (shown in the following image), users can select from four default contrast themes: Aquatic, Desert, Dusk, and Night sky. See Contrast colors for details on picking one of the dynamic system HighContrast colors for the SystemColor brush.
In the HighContrast ResourceDictionary (shown in the following code snippet), specify an appropriate SystemColor brush. Give it an x:Key name corresponding to its intended use (a StaticResource referencing an existing system brush would also be appropriate). In the Default dictionary, create the type of Brush you need (usually a SolidColorBrush). In App.xaml, create a ThemeDictionaries collection with both a Default and a HighContrast ResourceDictionary (a Light ResourceDictionary is not necessary for this example). Creating theme dictionariesĪ ResourceDictionary.ThemeDictionaries object can indicate theme colors that are different from the system-defined colors by specifying brushes for the Default (Dark), Light, and HighContrast contrast themes.Ĭontrast theme refers to the feature in general, while HighContrast refers to the specific dictionary being referenced.
You can programmatically check if the current theme is a contrast theme through the AccessibilitySettings class (you must call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content). If you are using brushes correctly, this setting should be turned off. This sets all text color to white with a solid black highlight behind it, ensuring sufficient contrast against all backgrounds.
Windows apps have HighContrastAdjustment turned on by default. :::image type="content" border="false" source="images/contrast-theme-calculators.png" alt-text="Calculator shown in Light theme and Aquatic contrast theme."::: Setting HighContrastAdjustment to None If you have not selected a theme previously, the Aquatic theme is used by default (shown in the following image). You can also press the left-Alt key + Shift key + Print screen (PrtScn on some keyboards) to quickly turn contrast themes on or off. To see how your app behaves with contrast themes, enable and customize them through the Settings > Accessibility > Contrast themes page. For more on light and dark themes, see Color. Contrast themes use a small palette of colors (with a contrast ratio of at least 7:1) to help make elements in the UI easier to see, reduce eye strain, improve text readability, and accommodate user preferences.ĭon’t confuse contrast themes with light and dark themes, which support a much larger color palette and don't necessarily increase contrast or make things easier to see.