Como manter foco visível em temas claros e escuros

Faça o indicador sobreviver à troca de tema

O foco deve continuar identificável em links, botões, campos e menus sobre todas as superfícies: fundo claro, painel escuro, imagem, borda e estados selecionados. Preserve o indicador nativo do navegador se ele continuar visível. Não remova outline sem uma substituição igualmente perceptível.

Um anel duplo pode contrastar tanto em fundos claros quanto escuros: o anel interno escuro aparece sobre superfície clara; o anel externo claro contorna controles sobre regiões escuras. Ajuste as cores ao design real e teste estados de alto contraste e zoom.

:focus-visible {
  outline: 3px solid #172033;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff;
}

@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid #172033;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #fff;
  }
}

Essas cores são apenas ponto de partida: sobre fundo branco, o anel branco sozinho não se distingue; sobre fundo muito claro o anel escuro é essencial. Em superfícies padronizadas por tema, defina variáveis para anéis e escolha a ordem de cores que sempre deixe ao menos um limite visível. O indicador também não pode ser cortado por overflow: hidden, modal ou cabeçalho fixo.

Critérios para revisar o resultado

• Confirme que todo controle operável com Tab mostra um estado de foco claro e consistente. Verifique também menus, diálogos, links dentro de cards e controles no rodapé.
• Meça a cor do anel contra as cores adjacentes no estado focado, não somente contra o fundo geral. Um anel duplo ajuda em fundos heterogêneos.
• Use uma área suficientemente grande: um contorno contínuo de pelo menos 2 CSS px é uma referência robusta associada ao nível AAA de foco visível; o critério AA exige foco visível e contraste não textual aplicável, sem essa mesma fórmula de tamanho em todos os casos.
• Verifique zoom a 200% e 400%, rolagem, modo claro/escuro, :hover, :active, selecionado e cabeçalho fixo.

Teste por teclado

1. Recarregue a página e navegue apenas com Tab, Shift+Tab, Enter e Espaço.
2. Em cada controle, registre se o foco é visível sobre o fundo local e se o próximo foco segue a ordem visual.
3. Repita na versão clara/escura, em componentes dentro de modal e no menor viewport suportado.
4. Confirme que clicar com mouse não deixa foco oculto, sem eliminar o estado de teclado (:focus-visible).

Consulte WCAG 2.2 Foco Visível, Contraste Não Textual e o critério AAA Aparência do Foco. As exigências específicas dependem do critério de conformidade escolhido.