Modo de alto contraste
Plataformas
Clientes – servidores Windows 8 – Windows Server 2012
Descrição
Em sistemas operacionais Windows anteriores, o modo de alto contraste era limitado a temas em execução em temas clássicos, que não eram visualmente estilizados. Em Windows 8 e Windows Server 2012, o modo clássico foi removido e substituído por temas de alto contraste visualmente estilizados. Um dos principais benefícios dessa alteração é a remoção de um caminho de código separado para aplicativos em execução no modo clássico.
Os desenvolvedores ainda precisam ser educados sobre como o modo de alto contraste pode afetar seu aplicativo e como desenvolver um aplicativo que seja verdadeiramente agnóstico de estilo. Isso é importante porque, embora o uso incorreto ou a suposição de cores do tema possam fazer com que os aplicativos se comportem corretamente sob um estilo visual como Aero, esses mesmos aplicativos respondem incorretamente sob alto contraste. Por exemplo, no Aero, o texto é sempre preto e a cor de destaque é um azul claro. No preto de alto contraste, no entanto, a cor de destaque é preta. Se você assumir o texto preto, como tem sido o caso em muitos aplicativos in-box antes de Windows 8 e usar o padrão do sistema para realçar, o usuário verá o texto preto em uma tela de fundo preta. É necessário nessas situações entender como usar temas e métricas do sistema corretamente para que o aplicativo fique correto entre estilos.
Manifestações
- O tema não está habilitado na área de cliente de aplicativos que não contêm uma marca Windows 8 <com suporte no> manifesto do aplicativo. Portanto, os aplicativos devem renderizar a área do cliente, usando o caminho de código necessário para renderizar no modo de alto contraste do tema clássico.
- O tema não está habilitado nas áreas não cliente e cliente de aplicativos em temas de alto contraste. Ele também não está habilitado em aplicativos que não contêm uma marca Windows 8 <com suporte> no manifesto do aplicativo e que desenham na área não cliente de uma janela usando a API DwnIsCompositionEnabled(). Todo o aplicativo é renderizado no modo de alto contraste do tema clássico.
- Aplicativos que adicionam suporte para Windows 8 em seu manifesto, mas não usam estilos visuais para renderização, ou seja, eles codificam cores ou imagens em seus aplicativos, podem não renderizar corretamente em temas de alto contraste. O texto pode ser difícil de ler ou as imagens podem não aparecer como deveriam no modo de alto contraste.
Atenuação
As cores de texto nos temas de alto contraste foram criadas para estar em conformidade com as diretrizes de acessibilidade da Microsoft. Mantemos uma taxa de alto contraste de 14:1 entre o primeiro plano e o plano de fundo. Se as cores habilitadas por padrão não forem adequadas para um usuário final específico, elas poderão ser facilmente personalizadas por meio das configurações do painel de controle para "Cor da Janela" nesses temas de alto contraste.
Esses componentes de interface do usuário são personalizáveis em temas de alto contraste:
- Cor da tela de fundo da janela
- Cor do texto
- Cor dos hiperlinks
- Texto desabilitado
- Cores em primeiro plano e tela de fundo de texto selecionadas
- Cores de primeiro plano e de plano de fundo do título da janela ativa
- Cores do título da janela inativa em primeiro plano e em segundo plano
- Cores de primeiro plano e plano de fundo do botão
Solução
Se um comportamento inesperado for visto em aplicativos em temas de alto contraste, uma dessas soluções poderá ajudar:
Manifestando um aplicativo para Windows 8:
Os aplicativos que não contiverem a marca Windows 8 <com suporte> no manifesto do aplicativo terão suas áreas de cliente renderizadas sem um tema. Todos os aplicativos em caixa devem conter essa entrada no manifesto do aplicativo. Adicione o valor guid 4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38 para Windows 8.
Usando estilos visuais com UIs desenhadas pelo proprietário:
Os controles desenhados pelo proprietário devem seguir as instruções sobre o MSDN para renderizar corretamente partes de controle e estados, incluindo texto. Os desenvolvedores não devem confiar no texto ou na cor da tela de fundo especificada em um contexto de dispositivo para usar métodos não UxTheme para renderização. No caso em que não há nenhuma parte de tema para o controle em questão, use GetThemeSysColor com a métrica apropriada e desenhe o texto usando métodos GDI padrão. Se nenhuma das chamadas UxTheme for apropriada, use o método GetSysColor para obter a métrica apropriada.
Selecionando a cor do texto:
Não use uma cor de texto codificada, mesmo que seja considerada boa em todos os cenários comuns. Os temas de envio são criados de forma a dar suporte à alta visibilidade com as métricas associadas. Por exemplo, COLOR_HIGHLIGHTTEXT deve ser usado com COLOR_HIGHLIGHT como plano de fundo e COLOR_WINDOWTEXT deve ser usado com COLOR_WINDOW como um plano de fundo. Se houver exceções a essas associações, trabalhe com elas nas partes do tema e nas próprias definições de estado e não no código. Ao criar UIs de alto contraste, é crucial que a interface do usuário seja agnóstica para o tema de alto contraste aplicado no momento, pois os usuários de alto contraste podem personalizar suas cores.
Respondendo ao evento WM_ThemeChange:
Se o aplicativo armazenar em cache as cores recuperadas do tema ou aplicar cores de forma diferente do padrão, adicione um manipulador de mensagens para WM_THEMECHANGE que recalculará os valores de cor armazenados e repintará a interface do usuário.
Escrevendo um aplicativo WWA de alto contraste:
Os aplicativos Web não têm acesso às APIs UxTheme, mas ainda devem ser gravados com as métricas atuais do sistema como base para a interface do usuário. Há alguns recursos para os desenvolvedores do WWA aproveitarem para garantir um aplicativo compatível com alto contraste:
- A especificação de cor CSS do W3C especifica a sintaxe para usar métricas do sistema em vez de cores específicas
- O suporte para consultas de mídia de alto contraste está sendo adicionado ao Internet Explorer 10
- As WWAs podem aproveitar o método IAccessibilityCapabilities::get_HighContrast() para verificar o estado de alto contraste
Os aplicativos da Windows Store não têm muitos dos mesmos problemas com as partes de tema presentes em aplicativos clássicos do Windows, mas você ainda precisa garantir a conformidade de alto contraste. Por padrão, o Internet Explorer ignora determinados estilos definidos pelo usuário e os substitui por valores compatíveis com alto contraste. Por exemplo, as propriedades CSS de tela de fundo, plano de fundo e cor são ignoradas.
Se você não quiser que o Internet Explorer ignore as propriedades definidas e verifique se a interface do usuário está em conformidade com alto contraste, você pode definir a nova propriedade M3 CSS –ms-high-contrast: desativada em um elemento pai.
Escrevendo um aplicativo da Windows Store de alto contraste:
O aplicativo da Windows Store deve usar a classe SystemColors para determinar a coloração adequada do elemento de interface do usuário, tendo em mente que determinadas cores de métrica do sistema foram projetadas para serem usadas em conjunto, como SystemColors.WindowColor e SystemColors.WindowTextColor. Isso facilita uma experiência de alto contraste superior.
Detectando corretamente alto contraste em versões anteriores do Windows:
Os aplicativos em execução em versões anteriores do Windows não têm acesso aos novos temas de alto contraste, mesmo que o manifesto especifique a compatibilidade com a versão do Windows em questão. Dessa forma, pode ser necessário inserir caminhos de código adicionais para lidar com a renderização no ambiente clássico usado em versões anteriores do Windows. A presença de alto contraste nesse caso deve ser verificada chamando a função SystemParametersInfo com o sinalizador SPI_GETHIGHCONTRAST. Essa é a única maneira com suporte de verificar a presença de alto contraste.
Testes
Ao testar um aplicativo, verifique se ele é renderizado corretamente em todos os temas em caixa fornecidos pelo Windows 8: Aero, Basic, High Contrast 1, High Contrast 2, High Contrast Black e High Contrast White. Verifique se o texto está claramente visível e fácil de ler nos temas de alto contraste.
Recursos
- Classes aero style, partes e estados (o novo tema básico e temas de alto contraste também usam esses estados)
- Partes e Estados comuns a todos os estilos visuais
- Usando estilos visuais com controles personalizados e Owner-Drawn
- Função GetSysColor
- W3C CSS Color Module Level 3
- Classe SystemColors
- Função SystemParametersInfo
- Acessibilidade da Microsoft