Calculadora de Tamanho de Borda de Foco Visivel em px

Tamanho da borda de foco visivel (px)

A WCAG 2.2 introduziu o criterio 2.4.11 Foco Nao Obscurecido (Minimo) — Nivel AA e o complementar 2.4.13 Aparencia do Foco, que juntos exigem indicadores de foco grandes e contrastados o bastante para serem inconfundiveis. A area minima e 2 CSS px de espessura de perimetro, e a razao de contraste entre o estado focado e o nao focado deve ser de pelo menos 3:1 contra o fundo adjacente. A formula compacta e borda ≥ 2 px && contraste ≥ 3:1.

No Tailwind CSS a receita idiomatica e focus:ring-2 focus:ring-blue-500 focus:ring-offset-2, que aplica um anel de 2 px com deslocamento. Em CSS puro, prefira :focus-visible em vez de :focus — o primeiro so dispara em navegacao por teclado, evitando contornos chatos apos cliques de mouse. Os navegadores trazem um anel de foco padrao (o legado -webkit-focus-ring-color), mas ele varia muito entre Chrome, Firefox e Safari, entao sempre defina o seu. A recomendacao 3.6 do eMAG (Modelo de Acessibilidade em Governo Eletronico) brasileiro repete a mesma regra.

Aplicacoes

Use esta calculadora ao desenhar botoes, links, controles de formulario, checkboxes customizados, controles segmentados, abas e qualquer widget interativo. Valide o indicador em fundos claros e escuros — um anel azul pode falhar 3:1 sobre um hero azul-marinho. Em UIs densas (toolbars, grids), 2 px pode ficar visualmente poluido; considere 3 px com opacidade reduzida para preservar contraste suavizando o visual.

FAQ

box-shadow conta como borda de foco? Sim — uma sombra interna ou externa com contraste e espessura corretos satisfaz a 2.4.11. Costuma ser preferida porque nao afeta o layout.

Qual a diferenca entre :focus e :focus-visible? :focus aplica em qualquer foco (inclusive mouse), enquanto :focus-visible so combina quando o navegador decide heuristicamente que o usuario precisa do indicador, tipicamente teclado ou tecnologia assistiva.

Posso usar so cor para indicar foco? Nao — pela WCAG 1.4.1 Uso de Cor, mudanca de contraste isolada e insuficiente. E preciso uma mudanca estrutural (borda, anel, outline) de pelo menos 2 px.