Temas de contraste

Os temas de contraste usam uma pequena paleta de cores (com uma taxa de contraste de pelo menos 7:1) para ajudar a tornar os elementos na interface do usuário mais fáceis de ver, reduzir a tensão ocular, melhorar a legibilidade do texto e acomodar as preferências do usuário.

Observação

Não confunda temas de contraste com temas claros e escuros, que dão suporte a uma paleta de cores muito maior e não necessariamente aumentam o contraste ou facilitam a visualização das coisas. Para obter mais informações sobre temas claros e escuros, consulte Cor.

Para ver como seu aplicativo se comporta com temas de contraste, habilite-os e personalize-os por meio da página Temas de Contraste de Acessibilidade > de Configurações>.

Dica

Você também pode pressionar a tecla Alt esquerda + tecla Shift + Tela de impressão (PrtScn em alguns teclados) para ativar ou desativar rapidamente os temas de contraste. Se você não tiver selecionado um tema anteriormente, o tema Aquático será usado por padrão (mostrado na imagem a seguir).

Definindo HighContrastAdjustment como Nenhum

Os aplicativos do Windows têm HighContrastAdjustment ativado por padrão. Isso define toda a cor do texto como branco com um realce preto sólido atrás dele, garantindo contraste suficiente em relação a todos os planos de fundo. Se você estiver usando pincéis corretamente, essa configuração deverá ser desativada.

Detectando o alto contraste

Você pode marcar programaticamente se o tema atual for um tema de contraste por meio da classe AccessibilitySettings (você deve chamar o construtor AccessibilitySettings de um escopo em que o aplicativo é inicializado e já está exibindo conteúdo).

Criando dicionários de temas

Um objeto ResourceDictionary.ThemeDictionaries pode indicar cores de tema diferentes das cores definidas pelo sistema especificando pincéis para os temas de contraste Padrão (Escuro), Claro e HighContrast .

Dica

O tema contraste refere-se ao recurso em geral, enquanto HighContrast se refere ao dicionário específico que está sendo referenciado.

1. Em App.xaml, crie uma coleção ThemeDictionaries com um Default e um HighContrastResourceDictionary (um ResourceDictionaryLight não é necessário para este exemplo).

2. No dicionário Padrão , crie o tipo de Pincel de que você precisa (geralmente um SolidColorBrush). Dê a ele um nome x:Key correspondente ao uso pretendido (um StaticResource referenciando um pincel de sistema existente também seria apropriado).

3. No HighContrast ResourceDictionary (mostrado no snippet de código a seguir), especifique um pincel SystemColor apropriado. Consulte Cores de contraste para obter detalhes sobre como escolher uma das cores highcontrast do sistema dinâmico para o pincel SystemColor .

   <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>
   

Cores de contraste

Na página Configurações > Temas de facilidade de acesso > Contraste (mostrados na imagem a seguir), os usuários podem selecionar entre quatro temas de contraste padrão: Aquático, Deserto, Anoitecer e Céu Noturno.

Depois que o usuário seleciona uma opção, ele pode optar por aplicá-la imediatamente ou editar o tema. A imagem a seguir mostra a caixa de diálogo Editar tema para o tema contraste aquático .

Esta tabela mostra as cores do tema de contraste e seus emparelhamentos recomendados. Cada recurso SystemColor é uma variável que atualiza automaticamente a cor quando o usuário alterna temas de contraste.

Amostra de cores	Descrição
	SystemColorWindowColor Tela de fundo de páginas, painéis, pop-ups e janelas. Emparelhar com SystemColorWindowTextColor
	SystemColorWindowTextColor Títulos, cópia do corpo, listas, texto de espaço reservado, bordas do aplicativo e da janela, qualquer interface do usuário que não possa ser interagida. Emparelhar com SystemColorWindowColor
	SystemColorHotlightColor Hiperlinks. Emparelhar com SystemColorWindowColor
	SystemColorGrayTextColor Interface do usuário inativa (desabilitada). Emparelhar com SystemColorWindowColor
	SystemColorHighlightTextColor Cor de primeiro plano para texto ou interface do usuário que está selecionado, interagiu com (focalizar, pressionar) ou em andamento. Emparelhar com SystemColorHighlightColor
	SystemColorHighlightColor Cor da tela de fundo ou de destaque da interface do usuário que está selecionada, interagiu com (focalizar, pressionar) ou em andamento. Emparelhar com SystemColorHighlightTextColor
	SystemColorButtonTextColor Cor de primeiro plano para botões e qualquer interface do usuário com a qual possa interagir. Emparelhar com SystemColorButtonFaceColor
	SystemColorButtonFaceColor Cor da tela de fundo para botões e qualquer interface do usuário com a qual possa interagir. Emparelhar com SystemColorButtonTextColor

A tabela a seguir mostra como as cores aparecem quando usadas em um conjunto de planos de fundo como SystemColorWindowColor.

Exemplo	Valores
	SystemColorWindowTextColor
	SystemColorHotlightColor
	SystemColorGrayTextColor
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

No snippet de código a seguir, mostramos como escolher um recurso para BrandedPageBackgroundBrush. SystemColorWindowColor é uma boa opção aqui , pois BrandedPageBackgroundBrush indica que ele será usado para um plano de fundo.

<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>

Em seguida, o recurso é atribuído à tela de fundo de um elemento.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Usamos {ThemeResource} duas vezes no exemplo anterior, uma vez para referenciar SystemColorWindowColor e novamente para referenciar BrandedPageBackgroundBrush. Ambos são necessários para seu aplicativo aplicar o tema corretamente no tempo de execução. Esse é um bom momento para testar a funcionalidade em seu aplicativo. A tela de fundo da Grade será atualizada automaticamente à medida que você alternar para um tema de alto contraste. Ela também será atualizada ao alternar entre temas de alto contraste diferentes.

Observação

WinUI 2.6 e mais recente

Há oito pincéis de sistema de alto contraste disponíveis para referência por meio de um ResourceKey (consulte o exemplo a seguir para SystemColorWindowTextColorBrush).

<StaticResource x:Key="MyControlBackground" ResourceKey="SystemColorWindowTextColorBrush" />

Os nomes de pincel correspondem exatamente a uma das oito cores do sistema mencionadas anteriormente (com "Brush" acrescentado). É recomendável usar um StaticResource em vez de um SolidColorBrush local por motivos de desempenho.

Práticas recomendadas

Aqui estão algumas recomendações para personalizar as cores do tema de contraste em seu aplicativo do Windows.

• Teste em todos os quatro temas de alto contraste enquanto seu aplicativo está em execução.
• Ser consistente.
• Verifique se HighContrastAdjustment está definido None como em seu aplicativo (ele está ativado por padrão). Consulte Configurando HighContrastAdjustment como Nenhum.
• Não codifique uma cor no tema HighContrast. Em vez disso, use o SystemColorColor e ColorBrush os recursos. Para obter mais detalhes, consulte Cores embutidas em código.
• Não misture pares de plano de fundo/primeiro plano que não são compatíveis
• Não escolha o recurso de cor para estética. Lembre-se de que as cores mudam com o tema.
• Não use SystemColorGrayTextColor para cópia de corpo que seja secundária ou atue como texto de dica. Isso se destina apenas ao conteúdo desabilitado.
• Não use SystemColorHotlightColor e o pincel correspondente, pois ambos são reservados para hiperlinks.

Dica

Geralmente, é útil examinar o aplicativo Galeria do WinUI para ver como os controles comuns usam os pincéis SystemColor . Se já estiverem instalado, abra-os clicando nos seguintes links: Galeria do WinUI 3 ou Galeria do WinUI 2.

Se eles não estiverem instalados, você poderá baixar a Galeria do WinUI 3 e a Galeria do WinUI 2 da Microsoft Store.

Você também pode obter o código-fonte para ambos do GitHub (use o branch main para WinUI 3 e o branch winui2 para WinUI 2).

Cores embutidas em código

Os controles de plataforma fornecem suporte interno para temas de contraste, mas você deve ter cuidado ao personalizar a interface do usuário do aplicativo. Dois dos problemas mais comuns ocorrem quando a cor de um elemento é codificada ou um recurso SystemColor incorreto é usado.

No snippet de código a seguir, mostramos um elemento Grid declarado com uma cor de plano de fundo definida #E6E6E6 como (um cinza muito claro). Se você codificar a cor dessa maneira, também substituirá a cor da tela de fundo em todos os temas. Por exemplo, se o usuário selecionar o tema Contraste aquático , em vez de texto branco em uma tela de fundo quase preta, a cor do texto neste aplicativo mudará para branco enquanto a tela de fundo permanecer cinza claro. O contraste muito baixo entre o texto e a tela de fundo pode dificultar muito o uso desse aplicativo.

<Grid Background="#E6E6E6">

Em vez disso, recomendamos usar a extensão de marcação {ThemeResource} para fazer referência a uma cor na coleção ThemeDictionaries de um ResourceDictionary. Isso permite a substituição automática de cores e pincéis com base no tema atual do usuário.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Bordas

Páginas, painéis, pop-ups e barras devem usar SystemColorWindowColor para seu plano de fundo. Adicione uma borda somente tema de contraste quando necessário para preservar limites importantes em sua interface do usuário.

Dica

É recomendável usar bordas 2px para superfícies transitórias, como submenus e caixas de diálogo.

O painel de navegação e a página compartilham a mesma cor da tela de fundo em temas de contraste. Para distingui-los, uma borda somente tema de contraste é essencial.

Itens de lista com texto colorido

Em contraste, os itens em um ListView têm seus planos de fundo definidos como SystemColorHighlightColor quando o usuário passa o mouse, pressiona ou os seleciona. Um problema comum com itens de lista complexos ocorre quando o conteúdo do item de lista falha ao inverter sua cor, tornando os itens impossíveis de ler.

Tenha cuidado ao definir TextBlock.Foreground no DataTemplate do ListView (normalmente feito para estabelecer a hierarquia visual). A propriedade Foreground é definida no ListViewItem e cada TextBlock no DataTemplate herda a cor de Primeiro Plano correta. Definir Primeiro Plano quebra essa herança.

Você pode resolve isso definindo Primeiro plano condicionalmente por meio de um Estilo em uma coleção ThemeDictionaries. Como o Primeiro Plano não é definido por SecondaryBodyTextBlockStyle em HighContrast, a cor será inverter corretamente.

O snippet de código a seguir (de um arquivo App.xaml) mostra um exemplo de coleção ThemeDictionaries em um modelo de dados ListView .

<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>

Exemplos

Dica

Abra o aplicativo Galeria do WinUI 3 e veja suporte à acessibilidade de contraste de cores em ação.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

Tópicos relacionados

• Acessibilidade
• Amostra de configurações e contraste da interface do usuário
• Amostra de acessibilidade XAML
• Amostra de alto contraste XAML
• AccessibilitySettings