Contraste para indicador de foco visível
O que a norma pede
O indicador de foco tem contraste de pelo menos 3:1 com o fundo e com o estado sem foco.
- 1.4.11 (AA)
- 2.4.13 (AAA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Escolha a cor do foco com contraste de 3:1 sobre todos os fundos do produto e em relação ao estado sem foco. Para fundos variados, considere um contorno duplo, claro e escuro.
Foco em fundos diferentes
O site tem áreas brancas e azul-escuras.
Errado: Uma cor para tudo
Na especificação
Foco azul #026AA2 — invisível no rodapé azul.
O foco some em parte do site.
Certo: Foco adaptado
Na especificação
Foco azul no fundo claro; foco branco no fundo azul.
Sempre visível.
Use um contorno de foco com pelo menos 2px e com cor definida pelo contexto de fundo. Um box-shadow duplo, claro e escuro, funciona sobre quase qualquer fundo.
Foco universal
Estilo de foco para qualquer fundo.
Errado: Foco fraco
:focus-visible { outline: 1px solid #B9E6FE; }Pouco contraste sobre branco.
Certo: Contorno duplo
:focus-visible { outline: 2px solid #0B4A6F; box-shadow: 0 0 0 4px #FFFFFF; }Visível em fundos claros e escuros.
Inclua o contraste do foco nos critérios do sistema de design e teste-o em todos os fundos usados no produto. Um foco com pouco contraste é quase o mesmo que nenhum foco.
Tema escuro
O produto ganhou um tema escuro.
Errado: Foco herdado
Entrega
Foco azul-escuro do tema claro mantido no tema escuro.
O foco some no tema escuro.
Certo: Foco por tema
Entrega
Cor de foco própria para o tema escuro, testada.
Visível nos dois temas.
Com o teclado, foque elementos sobre fundos claros e coloridos e meça o contraste do contorno com o fundo. Compare também o elemento com e sem foco.
Foco no rodapé azul
Medição do indicador.
Errado: Foco invisível
Medição
Contorno #026AA2 sobre fundo #026AA2 — 1:1.
Não atende.
Certo: Foco visível
Medição
Contorno #FFFFFF sobre #026AA2 — 5,6:1.
Atende.
Em blocos de destaque com fundo colorido, use as cores aprovadas do padrão visual, que já têm o foco testado. Avise o time antes de usar um fundo novo.
Bloco de destaque
Um bloco com links sobre fundo colorido.
Errado: Cor livre
No gerenciador
Fundo roxo personalizado com links.
O foco pode não aparecer.
Certo: Cor do padrão
No gerenciador
Fundo “Destaque azul” do padrão.
Foco já testado.