고대비 테마High contrast themes

Windows는 사용자가 사용 하도록 선택할 수 있는 OS 및 앱에 대해 고대비 테마를 지원 합니다.Windows supports high contrast themes for the OS and apps that users may choose to enable. 고대비 테마는 인터페이스를 더 쉽게 볼 수 있도록 하는 대비 색의 작은 색상표를 사용 합니다.High contrast themes use a small palette of contrasting colors that makes the interface easier to see.

밝은 테마와 고대비 검정색 테마에 표시 되는 계산기입니다.

밝은 테마와 고대비 검정색 테마에 표시 되는 계산기입니다.Calculator shown in light theme and High Contrast Black theme.

고대비를 > 하는 설정 > 간편한 액세스를 사용 하 여 고대비 테마로 전환할 수 있습니다.You can switch to a high contrast theme by using Settings > Ease of access > High contrast.

참고

고대비 테마는 고대비를 사용 하는 것으로 간주 되지 않는 매우 큰 색상표를 허용 하는 밝은 테마와 어두운 테마를 혼동 하지 마세요.Don't confuse high contrast themes with light and dark themes, which allow a much larger color palette that isn't considered to have high contrast. 더 밝은 테마 및 어두운 테마는 에 대 한 문서를 참조 하세요.For more light and dark themes, see the article on color.

일반 컨트롤은 전체 고대비 지원을 무료로 제공 하지만 UI를 사용자 지정 하는 동안 주의 해야 합니다.While common controls come with full high contrast support for free, care needs to be taken while customizing your UI. 가장 일반적인 고대비 버그는 컨트롤의 색을 인라인으로 하드 코딩 하 여 발생 합니다.The most common high contrast bug is caused by hard-coding a color on a control inline.

<!-- Don't do this! -->
<Grid Background="#E6E6E6">

<!-- Instead, create BrandedPageBackgroundBrush and do this. -->
<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

#E6E6E6첫 번째 예제에서 색을 인라인으로 설정 하면 그리드는 모든 테마에서 해당 배경색을 유지 합니다.When the #E6E6E6 color is set inline in the first example, the Grid will retain that background color in all themes. 사용자가 고대비 블랙 테마로 전환 하면 앱이 검정색 배경으로 표시 될 것입니다.If the user switches to the High Contrast Black theme, they'll expect your app to have a black background. #E6E6E6는 거의 흰색 이므로 일부 사용자가 앱과 상호 작용 하지 못할 수 있습니다.Since #E6E6E6 is almost white, some users may not be able to interact with your app.

두 번째 예제에서는 {Themeresource} 태그 확장 을 사용 하 여 ResourceDictionary 요소의 전용 속성인 ThemeDictionaries collection의 색을 참조 합니다.In the second example, the {ThemeResource} markup extension is used to reference a color in the ThemeDictionaries collection, a dedicated property of a ResourceDictionary element. ThemeDictionaries 를 사용 하면 XAML에서 사용자의 현재 테마에 따라 색을 자동으로 바꿀 수 있습니다.ThemeDictionaries allows XAML to automatically swap colors for you based on the user's current theme.

테마 사전Theme dictionaries

시스템 기본값에서 색을 변경 해야 하는 경우 앱에 대 한 ThemeDictionaries 컬렉션을 만듭니다.When you need to change a color from its system default, create a ThemeDictionaries collection for your app.

  1. 아직 존재 하지 않는 경우 적절 한 통로를 만들어 시작 합니다.Start by creating the proper plumbing, if it doesn't already exist. App.xaml에서 기본system.windows.forms.systeminformation.highcontrast 를 포함 하 여 ThemeDictionaries 컬렉션을 최소한으로 만듭니다.In App.xaml, create a ThemeDictionaries collection, including Default and HighContrast at a minimum.
  2. 기본적으로 필요한 브러시 유형 (일반적으로 system.windows.media.solidcolorbrush>)을 만듭니다.In Default, create the type of Brush you need, usually a SolidColorBrush. 사용 되는 것과 관련 된 x:Key 이름을 지정 합니다.Give it a x:Key name specific to what it is being used for.
  3. 원하는 을 할당 합니다.Assign the Color you want for it.
  4. System.windows.forms.systeminformation.highcontrast에 해당 브러시 를 복사 합니다.Copy that Brush into HighContrast.
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Default is a fallback if a more precise theme isn't called
            out below -->
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- Optional, Light is used in light theme.
            If included, Default will be used for Dark theme -->
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- HighContrast is used in all high contrast themes -->
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

마지막 단계는 고대비에서 사용할 색을 결정 하는 것입니다 .이에 대해서는 다음 섹션에서 설명 합니다.The last step is to determine what color to use in high contrast, which is covered in the next section.

참고

System.windows.forms.systeminformation.highcontrast 은 유일 하 게 사용할 수 있는 키 이름입니다.HighContrast is not the only available key name. HighContrastBlack, HighContrastWhiteHighContrastCustom도 있습니다.There's also HighContrastBlack, HighContrastWhite, and HighContrastCustom. 대부분의 경우 system.windows.forms.systeminformation.highcontrast 가 필요 합니다.In most cases, HighContrast is all you need.

고대비 색High contrast colors

설정 > 접근성 > 고대비 페이지에는 기본적으로 4 개의 고대비 테마가 있습니다.On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default.

고대비 설정

사용자가 옵션을 선택 하면 페이지에 미리 보기가 표시 됩니다.After the user selects an option, the page shows a preview.

고대비 리소스

미리 보기의 모든 색 견본을 클릭 하 여 해당 값을 변경할 수 있습니다. 모든 견본은 XAML 색 리소스에 직접 매핑됩니다.Every color swatch on the preview can be clicked to change its value. Every swatch also directly maps to an XAML color resource.

systemcolor * 색 리소스는 사용자가 고대비 테마를 전환할 때 색을 자동으로 업데이트 하는 변수입니다.Each SystemColor*Color resource is a variable that automatically updates color when the user switches high contrast themes. 다음은 각 리소스를 사용 하는 위치 및 시기에 대 한 지침입니다.Following are guidelines for where and when to use each resource.

리소스Resource 사용량Usage
SystemColorWindowTextColorSystemColorWindowTextColor 본문 복사, 머리글, 목록 상호 작용할 수 없는 모든 텍스트Body copy, headings, lists; any text that can't be interacted with
SystemColorHotlightColorSystemColorHotlightColor 하이퍼링크Hyperlinks
SystemColorGrayTextColorSystemColorGrayTextColor 사용 안 함 UIDisabled UI
SystemColorHighlightTextColorSystemColorHighlightTextColor 진행 중이거나 선택 되었거나 현재 상호 작용 중인 텍스트 또는 UI의 전경색입니다.Foreground color for text or UI that's in progress, selected, or currently being interacted with
SystemColorHighlightColorSystemColorHighlightColor 진행 중이거나 선택 되었거나 현재 상호 작용 중인 텍스트 또는 UI의 배경색입니다.Background color for text or UI that's in progress, selected, or currently being interacted with
SystemColorButtonTextColorSystemColorButtonTextColor 단추의 전경색 ( 상호 작용할 수 있는 모든 UIForeground color for buttons; any UI that can be interacted with
SystemColorButtonFaceColorSystemColorButtonFaceColor 단추의 배경색 상호 작용할 수 있는 모든 UIBackground color for buttons; any UI that can be interacted with
SystemColorWindowColorSystemColorWindowColor 페이지, 창, 팝업 및 막대의 배경Background of pages, panes, popups, and bars

기존 앱, 시작 또는 공용 컨트롤을 확인 하 여 다른 사용자가 자신의 자체와 유사한 고대비 디자인 문제를 해결 하는 방법을 확인 하는 것이 유용한 경우가 많습니다.It's often helpful to look to existing apps, Start, or the common controls to see how others have solved high contrast design problems that are similar to your own.

해야 할 일Do

  • 가능 하면 배경/전경 쌍을 고려 합니다.Respect the background/foreground pairs where possible.
  • 앱이 실행 되는 동안 모든 4 개의 고대비 테마에서 테스트 합니다.Test in all 4 high contrast themes while your app is running. 사용자는 테마를 전환할 때 앱을 다시 시작 하지 않아도 됩니다.The user should not have to restart your app when they switch themes.
  • 일관 됩니다.Be consistent.

안 함Don't

  • System.windows.forms.systeminformation.highcontrast 테마에서 색을 하드 코딩 합니다. systemcolor * 색 리소스를 사용 합니다.Hard code a color in the HighContrast theme; use the SystemColor*Color resources.
  • 미관에 대 한 색 리소스를 선택 합니다.Choose a color resource for aesthetics. 테마를 사용 하 여 변경 합니다.Remember, they change with the theme!
  • 보조 이거나 힌트로 사용 되는 본문 복사에 SystemColorGrayTextColor 를 사용 하지 마세요.Don't use SystemColorGrayTextColor for body copy that's secondary or acts as a hint.

이전 예제를 계속 하려면 BrandedPageBackgroundBrush에 대 한 리소스를 선택 해야 합니다.To continue the earlier example, you need to pick a resource for BrandedPageBackgroundBrush. 이 이름은 배경에 사용 됨을 나타내므로 Systemcolorwindowcolor 를 선택 하는 것이 좋습니다.Because the name indicates that it will be used for a background, SystemColorWindowColor is a good choice.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Default is a fallback if a more precise theme isn't called
            out below -->
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- Optional, Light is used in light theme.
            If included, Default will be used for Dark theme -->
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="#E6E6E6" />
            </ResourceDictionary>

            <!-- HighContrast is used in all high contrast themes -->
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="BrandedPageBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

이제 앱에서 나중에 배경을 설정할 수 있습니다.Later in your app, you can now set the background.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

BrandedPageBackgroundBrush을 참조 하기 위해 두 번 사용 되는 것은 Systemcolorwindowcolor 를 두 번 사용 BrandedPageBackgroundBrush하는 것입니다. ** { } **Note how {ThemeResource} is used twice, once to reference SystemColorWindowColor and again to reference BrandedPageBackgroundBrush. 응용 프로그램을 런타임에 올바르게 테마에 맞게 입력 해야 합니다.Both are required for your app to theme correctly at run time. 앱에서 기능을 테스트 하는 것이 좋습니다.This is a good time to test out the functionality in your app. 고대비 테마를 전환 하면 표 배경이 자동으로 업데이트 됩니다.The Grid's background will automatically update as you switch to a high contrast theme. 또한 서로 다른 고대비 테마 간에 전환할 때 업데이트 됩니다.It will also update when switching between different high contrast themes.

테두리를 사용 하는 경우When to use borders

페이지, 창, 팝업 및 막대는 모두 높은 대비의 배경에 대해 Systemcolorwindowcolor 를 사용 해야 합니다.Pages, panes, popups, and bars should all use SystemColorWindowColor for their background in high contrast. UI에서 중요 한 경계를 유지 하기 위해 필요한 경우 고대비 전용 테두리를 추가 합니다.Add a high contrast-only border where necessary to preserve important boundaries in your UI.

페이지의 나머지 부분에서 분리 된 탐색 창

탐색 창과 페이지는 모두 고대비에서 동일한 배경색을 공유 합니다. 고대비 전용 테두리가 매우 중요 합니다.The navigation pane and the page both share the same background color in high contrast. A high contrast-only border to divide them is essential.

항목 나열List items

반면, ListView 의 항목은 가리킨 다음, 누르거나, 선택 하는 경우 SystemColorHighlightColor 로 설정 된 배경에 있습니다.In high contrast, items in a ListView have their background set to SystemColorHighlightColor when they are hovered, pressed, or selected. 복합 목록 항목에는 일반적으로 항목을 가리킨 다음 누르거나 선택할 때 목록 항목의 내용이 색을 반전 하지 못하는 버그가 있습니다.Complex list items commonly have a bug where the content of the list item fails to invert its color when the item is hovered, pressed, or selected. 이렇게 하면 항목을 읽을 수 없습니다.This makes the item impossible to read.

밝은 테마의 간단한 목록과 고대비 검정 테마

밝은 테마의 간단한 목록 (왼쪽) 및 고대비 검정 테마 (오른쪽)입니다. 두 번째 항목이 선택 됩니다. 텍스트 색이 고대비에서 반전 되는 방식을 확인 합니다.A simple list in light theme (left) and High Contrast Black theme (right). The second item is selected; note how its text color is inverted in high contrast.

색이 지정 된 텍스트가 있는 목록 항목List items with colored text

한 가지 이유는 ListView의 DataTemplate에서 TextBlock을 설정 하는 것입니다.One culprit is setting TextBlock.Foreground in the ListView's DataTemplate. 일반적으로 비주얼 계층 구조를 설정 하기 위해 수행 됩니다.This is commonly done to establish visual hierarchy. 전경 속성은 ListViewItem에 대해 설정 되 고, DataTemplate의 textblock는 항목을 가리킴, 누르거나, 선택할 때 올바른 전경색을 상속 합니다.The Foreground property is set on the ListViewItem, and TextBlocks in the DataTemplate inherit the correct Foreground color when the item is hovered, pressed, or selected. 그러나 전경을 설정 하면 상속이 중단 됩니다.However, setting Foreground breaks the inheritance.

밝은 테마의 복합 목록과 고대비 검정 테마

밝은 테마의 복합 목록 (왼쪽) 및 고대비 검정 테마 (오른쪽)입니다. 고대비에서 선택한 항목의 두 번째 줄을 반전 하지 못했습니다.Complex list in light theme (left) and High Contrast Black theme (right). In high contrast, the second line of the selected item failed to invert.

ThemeDictionaries collection에 있는 스타일을 통해 전경을 조건부로 설정 하 여이 문제를 해결할 수 있습니다.You can work around this by setting Foreground conditionally via a Style that's in a ThemeDictionaries collection. System.windows.forms.systeminformation.highcontrastSecondaryBodyTextBlockStyle 에서 전경을 설정 하지 않았으므로 색이 올바르게 반전 됩니다.Because the Foreground is not set by SecondaryBodyTextBlockStyle in HighContrast, its color will correctly invert.

<!-- In App.xaml... -->
<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}">
            <Setter Property="Foreground" Value="{StaticResource SystemControlForegroundBaseMediumBrush}" />
        </Style>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <!-- The Foreground Setter is omitted in HighContrast -->
        <Style
            x:Key="SecondaryBodyTextBlockStyle"
            TargetType="TextBlock"
            BasedOn="{StaticResource BodyTextBlockStyle}" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- Usage in your DataTemplate... -->
<DataTemplate>
    <StackPanel>
        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Double line list item" />

        <!-- Note how ThemeResource is used to reference the Style -->
        <TextBlock Style="{ThemeResource SecondaryBodyTextBlockStyle}" Text="Second line of text" />
    </StackPanel>
</DataTemplate>

고대비 검색Detecting high contrast

AccessibilitySettings 클래스의 멤버를 사용 하 여 현재 테마가 고대비 테마 인지를 프로그래밍 방식으로 확인할 수 있습니다.You can programmatically check if the current theme is a high contrast theme by using members of the AccessibilitySettings class.

참고

앱이 초기화 되 고 이미 콘텐츠를 표시 하는 범위에서 AccessibilitySettings 생성자를 호출 해야 합니다.Make sure you call the AccessibilitySettings constructor from a scope where the app is initialized and is already displaying content.