Color

A cor é uma maneira intuitiva de comunicar informações aos usuários em seu aplicativo: ela pode ser usada para indicar interatividade, enviar comentários sobre ações do usuário e oferecer uma noção de continuidade visual para a interface.

Nos aplicativos do Windows, as cores são determinadas principalmente por cor de destaque e tema. Neste artigo, discutiremos como você pode usar cores em seu aplicativo e como usar recursos de tema e cor de destaque para que o aplicativo do Windows possa ser usado em qualquer contexto de tema.

Princípios de cores

Use as cores de modo relevante. Quando a cor é usada com moderação para realçar os elementos importantes, ela pode ajudar a criar uma interface do usuário flexível e intuitiva.

Use a cor para indicar interatividade. É uma boa ideia escolher uma cor para indicar elementos interativos do seu aplicativo. Por exemplo, muitas páginas da Web usam texto em azul para indicar um hiperlink.

A cor é pessoal. No Windows, os usuário pode escolher uma cor de destaque e um tema claro ou escuro, que são refletidos durante sua experiência. Você pode escolher como incorporar a cor de destaque e o tema do usuário no seu aplicativo, personalizando a experiência.

A cor é cultural. Considere como as cores que você usa serão interpretadas por pessoas de culturas diferentes. Por exemplo, em algumas culturas, a cor azul está associada à virtude e à proteção, enquanto em outras representa tristeza.

Temas

Os aplicativos do Windows podem usar um tema de aplicativo claro ou escuro. O tema afeta as cores da tela de fundo, do texto, dos ícones e dos controles comuns do aplicativo.

Tema claro

Tema escuro

Por padrão, o tema do seu aplicativo do Windows é a preferência de tema do usuário nas Configurações do Windows ou o tema padrão do dispositivo. Entretanto, é possível definir o tema especificamente para seu aplicativo do Windows.

Alterar o tema

Você pode alterar temas facilmente alterando a propriedade RequestedTheme no arquivo App.xaml.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

A remoção da propriedade RequestedTheme significa que seu aplicativo usará as configurações do sistema do usuário.

Os usuários também podem selecionar o tema alto contraste, que utiliza uma pequena paleta de cores contrastantes que facilita a visualização da interface do usuário. Nesse caso, o sistema substituirá o RequestedTheme.

Testar temas

Se você não solicitar um tema para o aplicativo, certifique-se de testá-lo com temas claros e escuros para garantir que o aplicativo seja legível em todas as condições.

Pincéis de temas

Os controles comuns automaticamente usam pincéis de tema para ajustar o contraste de temas claros e escuros.

Por exemplo, confira uma ilustração de como a AutoSuggestBox usa pincéis de tema:

Dica

Para obter uma visão geral visual dos pincéis de tema disponíveis, consulte o aplicativo Galeria WinUI 3: Cores

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

Uso de pincéis de tema

Ao criar modelos para controles personalizados, use os pincéis de tema em vez dos valores de cores embutidos no código. Deste modo, seu aplicativo se adapta com facilidade a qualquer tema.

Por exemplo, esses modelos de item para ListView demonstram como usar pincéis de tema em um modelo personalizado.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Para saber mais sobre como usar pincéis para temas em seu aplicativo, confira Recursos de tema.

Cor de ênfase

Os controles comuns usam uma cor de destaque para transmitir informações de estado. Por padrão, a cor de destaque é a SystemAccentColor que os usuários selecionam em suas Configurações. No entanto, você também pode personalizar a cor de destaque do aplicativo para refletir sua marca.

Substituição da cor de destaque

Para alterar a cor de destaque do aplicativo, coloque o seguinte código em app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Escolher uma cor de destaque

Se você selecionar uma cor de destaque personalizada para seu aplicativo, certifique-se de que o texto e a tela de fundo que usam a cor de destaque têm contraste suficiente para permitir uma ótima legibilidade. Para testar o contraste, você pode usar a ferramenta de seleção de cores nas configurações do Windows ou usar as ferramentas de contraste online.

Paleta de cor de destaque

Um algoritmo de cor de destaque no shell do Windows gera tonalidades claras e escuras da cor de destaque.

Esses tons podem ser acessados como recursos de tema:

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Você também pode acessar a paleta de cores de destaque programaticamente com o método UISettings.GetColorValue e a enumeração UIColorType.

Você pode usar a paleta de cores de destaque para temas de cores em seu aplicativo. Confira abaixo um exemplo de como você pode usar a paleta de cores de destaque em um botão.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

Ao usar texto colorido em uma tela de fundo colorida, verifique se há contraste suficiente entre o texto e a tela de fundo. Por padrão, hiperlinks ou o hipertextos usarão a cor de destaque. Se você aplicar variações da cor de destaque à tela de fundo, deverá usar uma variação da cor de destaque original para otimizar o contraste do texto colorido em uma tela de fundo colorida.

O gráfico a seguir ilustra um exemplo dos diversos tons de claro/escuro da cor de destaque e como tipos de cores podem ser aplicados em uma superfície colorida.

Para saber mais sobre os controles de estilo, confira Estilos de XAML.

API de cor

Existem várias APIs que podem ser usadas para adicionar cor ao seu aplicativo. Primeiro, a classe Colors, que implementa uma lista abrangente de cores predefinidas. Elas podem ser acessadas automaticamente com as propriedades XAML. No exemplo a seguir, é possível criar um botão e definir as propriedades de cor de primeiro e segundo plano de acordo com os membros da classe Colors.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

Você pode criar suas próprias cores de RGB ou valores hexadecimais usando a estrutura Color em XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

Você também pode criar a mesma cor no código usando o método FromArgb.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

As letras "Argb" significam alfa (opacidade), vermelho, verde e azul, que são os quatro componentes de uma cor. Cada argumento pode variar de 0 a 255. Você pode optar por omitir o primeiro valor, o que oferece uma opacidade padrão de 255 ou 100% opaco.

Observação

Se você estiver usando C++, é necessário criar cores usando a classe ColorHelper.

O uso mais comum para uma Cor é como um argumento para SolidColorBrush, que pode ser usado para pintar elementos da interface do usuário como uma única cor sólida. Esses pincéis geralmente são definidos em um ResourceDictionary, portanto, eles podem ser reutilizados em vários elementos.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Para saber mais sobre como usar pincéis, confira Pincéis XAML.

Usabilidade

Contraste

Verifique se os elementos e as imagens têm contraste suficiente para diferenciarem-se entre si, independentemente da cor ou do tema de destaque.

Ao considerar quais cores usar em seu aplicativo, a acessibilidade deve ser uma preocupação principal. Use as diretrizes abaixo para garantir que seu aplicativo esteja acessível para o máximo de usuários possível.

Iluminação

Lembre-se de que a variação na iluminação ambiente pode afetar a usabilidade do seu aplicativo. Por exemplo, uma página com tela de fundo preto pode se tornar ilegível em um ambiente externo devido ao brilho da tela, ao passo que uma página com tela de fundo branco pode ser difícil de olhar em uma sala escura.

Daltonismo

Lembre-se de que o daltonismo pode afetar a usabilidade do seu aplicativo. Por exemplo, um usuário com daltonismo para vermelho-verde terá dificuldade em distinguir elementos vermelhos e verdes entre si. Cerca de 8% dos homens e 0,5% das mulheres são daltônicos para vermelho-verde, portanto, evite usar essas combinações de cores como fator de diferenciação único entre os elementos do seu aplicativo.

Relacionados

• Estilos de XAML
• Recursos de temas XAML
• Galeria WinUI 3 - Cores