Calculadora de Tamanho de Borda de Foco Visivel em px
Recomenda a espessura minima em pixels da borda do foco visivel conforme WCAG 2.4.13 Focus Appearance.
—
Tamanho da borda de foco visivel (px)
A WCAG 2.2 trouxe dois criterios que aqui andam juntos: 2.4.11 Foco Nao Obscurecido (Minimo) — Nivel AA e 2.4.13 Aparencia do Foco. Entre os dois, o indicador de foco tem de ser grande e contrastado o suficiente para ninguem deixar passar. O mais fino que ele pode ter e 2 CSS px de espessura no perimetro, e o contraste entre o estado focado e o nao focado precisa chegar a 3:1 contra o que estiver atras. Resumindo: borda ≥ 2 px && contraste ≥ 3:1.
No Tailwind CSS a receita de praxe e focus:ring-2 focus:ring-blue-500 focus:ring-offset-2, que da um anel de 2 px com deslocamento. Escrevendo CSS puro, va de :focus-visible em vez de :focus, porque ele so dispara na navegacao por teclado e te poupa daquele contorno chato toda vez que alguem clica. Os navegadores ate trazem um anel padrao (o legado -webkit-focus-ring-color), mas ele fica tao diferente entre Chrome, Firefox e Safari que vale mesmo a pena definir o seu. A recomendacao 3.6 do eMAG (Modelo de Acessibilidade em Governo Eletronico) brasileiro diz a mesma coisa.
Aplicacoes
Recorra a esta calculadora ao desenhar botoes, links, controles de formulario, checkboxes customizados, controles segmentados, abas e, na verdade, qualquer widget interativo. Cheque o indicador em fundo claro e escuro, porque um anel azul que parece bom num lugar pode reprovar no 3:1 sobre um hero azul-marinho. Em UIs densas como toolbars e grids, 2 px lisos podem soar poluidos, entao tente 3 px com opacidade menor para manter o contraste sem pesar no visual.
FAQ
box-shadow conta como borda de foco? Conta sim. Uma sombra interna ou externa com contraste e espessura suficientes atende a 2.4.11, e muita gente prefere justamente porque ela nao mexe no layout.
Qual a diferenca entre :focus e :focus-visible? O :focus entra em qualquer foco, clique de mouse incluso. Ja o :focus-visible so combina quando o navegador conclui que o usuario de fato precisa enxergar o indicador, o que costuma ser teclado ou tecnologia assistiva.
Posso usar so cor para indicar foco? Nao. A WCAG 1.4.1 Uso de Cor deixa claro que so mudar o contraste nao resolve. Precisa tambem de uma mudanca estrutural, uma borda, anel ou outline de pelo menos 2 px.
Ferramentas Relacionadas
Calculadora de Tamanho de Area de Servico de Cozinha
Estima area minima de area de servico residencial conforme equipamentos.
Calculadora de Tamanho de Texto Recomendado WCAG AA
Recomenda tamanho minimo de texto em pixels para WCAG AA conforme distancia tipica de leitura.
Area minima do canil por tamanho do cao
Calcula area minima recomendada para canil conforme porte do cao e numero de animais.
Os resultados desta ferramenta têm caráter apenas informativo e educativo e não constituem aconselhamento profissional, financeiro, médico, jurídico, tributário ou contábil. Confirme decisões importantes com um profissional qualificado e fontes oficiais.