Verificador de contraste de cores
Texto grande de título (24px)
Texto normal de 14-16px. A maior parte do texto de interface, rótulos e parágrafos entra nesta categoria, por isso ela tem os requisitos de contraste mais rígidos.
Sobre o verificador de contraste
A razão de contraste mede o quão distinguível o texto é do seu fundo, numa escala de 1:1 (idênticos) a 21:1 (preto sobre branco). O WCAG exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 / 4.5:1 no nível AAA.
Este verificador calcula a razão a partir da luminância relativa exatamente como definido pelo WCAG 2.x, mostra resultados de aprovado/reprovado para cada nível e pré-visualiza suas cores em texto real. As notações HEX, RGB e HSL são aceitas.
Como verificar o contraste de cores
- Digite a cor do texto como HEX, RGB ou HSL, ou use o seletor de cores.
- Digite a cor de fundo sobre a qual o texto está.
- Leia a razão de contraste e os resultados AA/AAA.
- Ajuste as cores até que todas as verificações necessárias passem e copie o relatório.
Dicas de acessibilidade
- Texto grande significa pelo menos 24px normal ou cerca de 18.66px em negrito — só então o limite de 3:1 se aplica.
- Verifique os estados hover, focus, disabled e placeholder — eles costumam usar tons mais claros que reprovam.
- Componentes de interface e ícones precisam de pelo menos 3:1 contra as cores adjacentes (WCAG 1.4.11).
- Teste o modo escuro separadamente; paletas invertidas mudam todas as razões.
Guias relacionados
Entenda o workflow por trás desta ferramenta e o que revisar depois.
Checks de SEO técnico antes de enviar um site
Um checklist para garantir que buscadores possam descobrir, rastrear, entender e indexar páginas importantes.
Como depurar respostas JSON de API
Formate a resposta, confirme o status HTTP, valide o schema e compare mudanças do payload antes de alterar código.
Verificações antes de publicar uma paleta de cores
Uma razão aprovada é o ponto de partida, não a linha de chegada. Revise como o par se comporta em estados reais da interface.
Teste os dois temas
Um par que passa em fundo claro pode falhar após a inversão do modo escuro. Verifique cada tema que você publica.
Verifique os estados interativos
Hover, focus, disabled e visited costumam usar tons mais claros que caem abaixo de 4.5:1 sem ninguém perceber.
Não dependa apenas da cor
Combine cor com ícones, sublinhados ou rótulos de texto para que a informação sobreviva às deficiências de visão de cores.
Verifique as premissas de texto grande
O limite relaxado de 3:1 só vale a partir de 24px, ou 18.66px em negrito. Confirme o tamanho renderizado, não o token de design.
Privacidade e uso
Verificações rápidas sem conta
Toolinix foi feito para tarefas curtas de desenvolvimento: cole uma amostra segura, revise o resultado, copie o que precisa e siga em frente.
Sem login
Você pode usar as ferramentas sem criar conta, assinar newsletter ou salvar um workspace.
Local quando possível
Formatadores, geradores, codificadores e utilitários de texto geralmente rodam no navegador. Diagnósticos de rede podem precisar de uma consulta assistida pelo servidor para verificar URLs, domínios ou IPs públicos.
Não cole segredos
Não cole senhas de produção, chaves privadas, tokens de acesso, dados de clientes ou dados regulados em ferramentas online, a menos que sua própria política de segurança permita.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.