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 o cansaço ocular, melhorar a legibilidade do texto e acomodar as preferências do usuário.

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

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 contra todos os fundos. Se estiver a utilizar pincéis corretamente, esta definição deve ser desativada.

Deteção de alto contraste

Pode verificar programaticamente se o tema atual é um tema de contraste através da classe AccessibilitySettings (deve chamar o construtor AccessibilitySettings a partir de um escopo onde a aplicação foi inicializada e já está a exibir conteúdo).

Criação de dicionários temáticos

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

1. Em App.xaml, crie uma coleção de ThemeDictionaries que inclua tanto um ResourceDictionary Default quanto um ResourceDictionary HighContrast (um ResourceDictionary Light não é necessário para este exemplo).

2. No dicionário Default, crie o tipo de Brush de que precisa (geralmente um SolidColorBrush). Atribua-lhe um x:Key nome correspondente ao uso pretendido (um StaticResource referenciando um pincel de sistema existente também seria apropriado).

3. No HighContrast ResourceDictionary (mostrado no trecho de código a seguir), especifique um pincel SystemColor apropriado. Consulte Cores de contraste para obter detalhes sobre como escolher uma das cores dinâmicas de sistema HighContrast 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 Temas de contraste de facilidade > de acesso > (mostrada na imagem a seguir), os usuários podem selecionar entre quatro temas de contraste padrão: Aquático, Deserto, Crepúsculo 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 de contraste Aquatic.

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 Fundo de páginas, painéis, pop-ups e janelas. Emparelhar com SystemColorWindowTextColor
	SystemColorWindowTextColor Cabeçalhos, corpo do texto, listas, texto de espaço reservado, bordas de aplicativos e janelas, qualquer interface do usuário com a qual não é possível interagir. Emparelhe com SystemColorWindowColor
	SystemColorHotlightColor os hiperlinks. emparelham com SystemColorWindowColor
	SystemColorGrayTextColor Interface do usuário inativa ou desabilitada. Emparelhar com SystemColorWindowColor
	SystemColorHighlightTextColor Cor de primeiro plano do texto ou da interface do usuário selecionados, com os quais se interage (focalizados, pressionados) ou em andamento. Combine com SystemColorHighlightColor
	SystemColorHighlightColor Cor de fundo ou de destaque da UI selecionada, interagida (focalizada, pressionada) ou em andamento. Emparelhar com SystemColorHighlightTextColor
	SystemColorButtonTextColor Cor de primeiro plano dos botões e de qualquer interface do usuário com a qual possa ser interagida. Emparelhar com SystemColorButtonFaceColor
	SystemColorButtonFaceColor Cor de fundo dos botões e qualquer interface do usuário com a qual possa ser interagida. Emparelhar com SystemColorButtonTextColor

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

Exemplo	Valores
	SystemColorWindowTextColor
	SystemColorHotlightColor
	CorDoTextoCinzaDoSistema
	SystemColorHighlightTextColor + SystemColorHighlightColor
	SystemColorButtonTextColor + SystemColorButtonFaceColor

No trecho de código a seguir, mostramos como escolher um recurso para BrandedPageBackgroundBrush. SystemColorWindowColor é uma boa escolha aqui, pois BrandedPageBackgroundBrush indica que será utilizado 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>

O recurso é então atribuído ao plano de fundo de um elemento.

<Grid Background="{ThemeResource BrandedPageBackgroundBrush}">

Usamos {ThemeResource} duas vezes no exemplo anterior, uma para fazer referência SystemColorWindowColor e outra para fazer referência BrandedPageBackgroundBrush. Ambos são necessários para que o seu aplicativo esteja corretamente tematizado a tempo de execução. Este é um bom momento para testar a funcionalidade em seu aplicativo. O plano de fundo Grid será automaticamente atualizado quando alternares para um tema de alto contraste. Ele também será atualizado ao alternar entre diferentes temas de alto contraste.

Melhores práticas

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

• Teste todos os quatro temas de alto contraste enquanto seu aplicativo está em execução.
• Seja consistente.
• Certifique-se de HighContrastAdjustment está definido para None na sua aplicação (está ativado por predefinição). Consulte Configurar Ajuste de Alto Contraste como Nenhum.
• Não fixar diretamente uma cor no tema *HighContrast*. Em vez disso, use os recursos "SystemColor" Color e ColorBrush. Para obter mais detalhes, consulte Cores codificadas.
• Não misture pares de plano de fundo/primeiro plano que não sejam compatíveis
• Não escolha recurso de cor por razões estéticas. Lembre-se, as cores mudam com o tema.
• Não useSystemColorGrayTextColor para texto principal que seja secundário ou atue como texto de sugestão. Destina-se apenas a conteúdo desativado.
• Não useSystemColorHotlightColor e o pincel correspondente, pois ambos são reservados para hiperlinks.

Cores pré-definidas

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 trecho de código a seguir, mostramos um elemento Grid declarado com uma cor de plano de fundo definida como #E6E6E6 (um cinza muito claro). Se codificar a cor desta forma, também substituirá a cor de fundo em todos os temas. Por exemplo, se o usuário selecionar o tema Contraste aquático , em vez de texto branco em um plano de fundo quase preto, a cor do texto neste aplicativo mudará para branco enquanto o plano de fundo permanecerá cinza claro. O contraste muito baixo entre texto e fundo pode tornar este aplicativo muito difícil de usar.

<Grid Background="#E6E6E6">

Em vez disso, recomendamos utilizar a extensão de marcação {ThemeResource} para referenciar 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}">

Fronteiras

Páginas, painéis, pop-ups e barras devem usar SystemColorWindowColor para seu plano de fundo. Adicione uma borda de tema de contraste apenas onde necessário para preservar limites importantes na interface do utilizador.

O painel de navegação e a página compartilham a mesma cor de plano de fundo em temas de contraste. Para distingui-los, é essencial uma fronteira temática de contraste.

Listar itens com texto colorido

Em temas de contraste, os itens em um ListView têm o seu plano de fundo definido como SystemColorHighlightColor quando o usuário desloca o rato sobre, pressiona ou seleciona. Um problema comum com itens de lista complexos ocorre quando o conteúdo do item de lista não consegue inverter sua cor, tornando os itens impossíveis de ler.

Tenha cuidado ao definir o TextBlock.Foreground no DataTemplate do ListView (normalmente feito para estabelecer uma hierarquia visual). A propriedade Foreground é definida no ListViewIteme cada TextBlock no DataTemplate herda a cor correta Foreground. Definir de primeiro plano quebra essa herança.

Você pode resolver isso definindo de primeiro plano condicionalmente por meio de um de estilo em uma coleção ThemeDictionaries. Como o Primeiro Plano não é definido por SecondaryBodyTextBlockStyle noHighContrast , a cor será invertida corretamente.

O trecho de código a seguir (de um arquivo App.xaml) mostra um exemplo coleção de 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

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

Tópicos relacionados

• Acessibilidade
• exemplo de contraste e configurações da interface de utilizador
• Exemplo de acessibilidade em XAML
• amostra de alto contraste XAML
• Configurações de Acessibilidade