Verificador de tamanho mínimo para alvo de toque
O verificador de tamanho de alvos de toque compara a largura e a altura renderizadas de um botão, link, controle de ícone ou outro elemento interativo com o mínimo escolhido por você.
Executar grátis
O padrão é 44 por 44 pontos, uma referência comum no design para dispositivos móveis, mas você pode informar outro limite e outra unidade. O resultado mostra a aprovação de cada dimensão, a conclusão geral e a diferença exata a corrigir.
Meça o alvo interativo, não apenas o ícone visível
A acessibilidade por toque diz respeito à área que responde ao comando. Um ícone pequeno pode estar dentro de um botão com preenchimento confortável; por isso, medir apenas a arte pode fazer um bom controle parecer inadequado. O contrário também ocorre: um ícone pode parecer grande, embora seu elemento clicável ocupe uma caixa menor. Inspecione o elemento interativo renderizado e informe a largura e a altura dele. Mantenha os quatro valores de tamanho na mesma unidade. O verificador adota pontos e um mínimo de 44 por 44, mas não converte silenciosamente pontos, pixels, pixels independentes de densidade ou milímetros, pois essas unidades dependem do design e do ambiente de execução. A unidade fica registrada no resultado para manter os relatórios claros. Largura e altura devem ser números positivos e finitos. Zero, valores negativos, dimensões ausentes, texto e números não finitos são rejeitados, em vez de gerar uma conclusão de acessibilidade enganosa. Assim, a saída atende a revisões manuais, verificações de sistemas de design e testes automatizados determinísticos.
Interprete as verificações e as diferenças das dimensões
Um alvo de toque só é aprovado quando as duas dimensões atingem ou superam seus respectivos mínimos. A resposta separa width_passes e height_passes porque um controle largo, porém baixo, ainda exige atenção, mesmo que sua área total pareça generosa. meets_minimum só é verdadeiro quando os dois indicadores são verdadeiros. Quando uma dimensão falha, sua diferença informa exatamente quanto deve ser acrescentado na unidade selecionada; uma dimensão aprovada tem diferença zero. Por exemplo, um alvo de 40 por 52 pontos diante de um mínimo de 44 por 44 é reprovado no geral: a altura passa, a largura não, e width_shortfall é 4. A igualdade conta como aprovação, portanto 44 por 44 atende exatamente ao limite padrão. O cálculo compara as dimensões separadamente, sem considerar um retângulo de área igual como equivalente a um quadrado. Essa distinção é importante no toque, pois um alvo muito estreito ou baixo continua difícil de alcançar mesmo com área numericamente grande. Não há arredondamento; medições decimais e mínimos personalizados preservam a precisão enviada por você.
Escolha o mínimo adequado à sua norma
Sistemas de design e critérios de acessibilidade publicam tamanhos de alvo diferentes, e unidades parecidas não são automaticamente intercambiáveis. Use o padrão de 44 por 44 pontos quando essa for a regra que você deseja verificar. Se o seu produto definir outro alvo, informe minimum_width e minimum_height explicitamente, na mesma unidade do elemento medido. Por exemplo, uma equipe que siga uma convenção de 48 por 48 pixels independentes de densidade pode definir os dois mínimos como 48 e selecionar dp. Uma auditoria da web pode escolher px e informar o limite em pixels CSS exigido pelo critério adotado. O verificador apresenta uma comparação geométrica; ele não afirma que um único padrão comprova conformidade com todas as normas de acessibilidade e não avalia exceções de espaçamento, alvos sobrepostos, zoom, gestos alternativos ou o tamanho de controles próximos. Esses pontos exigem análise do layout e da interação. Use o resultado como uma verificação específica e reproduzível dentro desse processo mais amplo. Como o algoritmo não usa rede, relógio, aleatoriedade ou consulta ao dispositivo, a mesma entrada sempre produz a mesma saída no navegador e pela API.
Casos de uso
Revisar uma especificação de design móvel
Compare as dimensões propostas para botões e controles de ícone com o mínimo de toque adotado pelo sistema de design do produto.
Fazer a triagem de uma auditoria de acessibilidade
Transforme dimensões medidas em resultados separados de largura e altura, com diferenças exatas para os chamados de correção.
Testar componentes do sistema de design
Use resultados determinísticos em verificações automáticas das variantes compacta, normal e grande antes do lançamento.
Perguntas frequentes
Qual mínimo o verificador usa por padrão?
O padrão é 44 por 44 pontos. Defina minimum_width, minimum_height e unit quando sua norma adotar outro limite.
O alvo passa se apenas uma dimensão for grande o bastante?
Não. Largura e altura são verificadas separadamente, e meets_minimum só é verdadeiro quando ambas passam.
A ferramenta converte pontos, pixels, dp e milímetros?
Não. As dimensões do elemento e os mínimos devem usar a mesma unidade selecionada, evitando conversões dependentes do contexto.
Devo medir o ícone ou a área clicável?
Meça toda a área interativa de toque, inclusive o preenchimento clicável, e não apenas o ícone ou rótulo visível.
A aprovação garante conformidade de acessibilidade?
Não. Ela verifica somente as dimensões fornecidas diante do mínimo indicado. Espaçamento, exceções, gestos e outros requisitos precisam de análise própria.
Quanto custa usar a API?
O acesso pela API começa em US$ 0,002 por solicitação. A versão no navegador executa localmente o mesmo cálculo determinístico.
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/verify/touch-target-size-check \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":48,"height":48}'const res = await fetch("https://api.kit.forhosting.com/verify/touch-target-size-check", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 48,
"height": 48
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/verify/touch-target-size-check",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 48,
"height": 48
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/touch-target-size-check", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":48,"height":48}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":48,"height":48}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/touch-target-size-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"width": 48,
"height": 48
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "verify.touch_target_size_check",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |