Estratégia de acessibilidade

Alto contraste

High contrast

Prioriza diferenças perceptíveis e controles identificáveis, com suporte a preferências do sistema.

CLAREZA PRIMEIROFeito para
ser lido.Continuar →

Exemplo didático · Representação visual do padrão

Quando usar

Melhorar a legibilidade e atender preferências visuais diversas.

Cuidados e acessibilidade

Teste cores forçadas, foco e estados; contraste alto não resolve todas as barreiras.

Como reconhecer

Bordas claras, texto legível, distinções além de cor e foco evidente.

Não confunda

Alto contraste é uma estratégia funcional, não uma estética única ou uma certificação.

Exemplo de código

@media (forced-colors: active) {
  button { border: 2px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Alto contraste (High contrast) em português do Brasil. Prioriza diferenças perceptíveis e controles identificáveis, com suporte a preferências do sistema. Contexto de uso: Melhorar a legibilidade e atender preferências visuais diversas. Estrutura: Bordas claras, texto legível, distinções além de cor e foco evidente. Características visuais: forced-colors. Requisito: Teste cores forçadas, foco e estados; contraste alto não resolve todas as barreiras. Considere também: Alto contraste é uma estratégia funcional, não uma estética única ou uma certificação. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗