Verificador de contraste de cores
Saiba se um texto ficará legível para todos, não importa como apareça na sua tela: o cinza-escuro #111827 sobre branco tem razão de contraste de 17,74 e atende AA e AAA em texto normal e grande. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Cor de primeiro plano
- #111827
- Cor de fundo
- hsl(0, 0%, 100%)
- Relação de contraste
- 17,74
Duas cores podem parecer legíveis na sua tela e ainda falhar no contraste necessário para um texto acessível. Informe a cor do conteúdo e a do fundo para receber a proporção exata e os resultados WCAG de cada tamanho.
Quando o olho não basta para decidir
Brilho da tela, peso da fonte, luz do ambiente e cores próximas mudam a percepção de uma mesma combinação. Por isso, aprovar um texto só porque ele parece nítido no monitor de quem criou o layout é arriscado. O verificador transforma as duas cores em sRGB, calcula a luminância relativa de cada uma e aplica a fórmula de contraste da WCAG.
A resposta traz uma proporção numérica e quatro decisões separadas: AA e AAA para texto comum, além de AA e AAA para texto grande. Um título pode passar enquanto o parágrafo menor falha, e a matriz deixa essa diferença explícita.
Cole a cor do jeito que ela aparece no projeto
Você pode usar HEX com três ou seis dígitos, uma função rgb() com três canais ou hsl() com saturação e luminosidade em porcentagem. O resultado devolve as duas entradas normalizadas em HEX de seis dígitos e RGB, o que facilita comparar um token do Figma com uma variável do CSS ou registrar o teste em uma revisão. Transparência não entra no cálculo de propósito: o tom visível depende das camadas que estão por baixo.
Primeiro componha a cor transparente sobre o fundo final; depois verifique o par opaco realmente mostrado ao usuário.
Use o resultado sem transformar um teste em certificado
A matriz responde apenas se duas cores sólidas têm contraste suficiente nas condições indicadas. Ela não mede tamanho e peso reais da fonte, gradientes, imagens, estados de foco, texto sobre vídeo nem a estrutura acessível da página. Confira separadamente os estados normal, selecionado, erro e passagem do ponteiro sempre que as cores mudarem.
No navegador, todo o cálculo roda localmente e ajuda a revisar uma paleta sem enviar dados.
Casos de uso
Revisão de tokens de design
Confira pares de texto e superfície antes de publicar uma paleta, separando corpo de texto e títulos grandes.
Controle de qualidade de componentes
Teste estados normal, selecionado, alerta e foco sem depender da impressão visual de uma única tela.
Perguntas frequentes
Quais formatos de cor são aceitos?
HEX com três ou seis dígitos, rgb() com três canais e hsl() com porcentagens de saturação e luminosidade. Alfa e nomes de cores não são aceitos.
O que significam AA e AAA no resultado?
São níveis de conformidade da WCAG. Eles aparecem separados para texto comum e grande porque o contraste exigido muda conforme tamanho e peso.
O verificador de contraste é grátis?
A ferramenta desta página roda grátis no navegador do computador ou celular.
O aplicativo móvel nativo usa o cálculo gratuito do navegador?
Abra esta página no navegador do celular quando quiser o cálculo local.
Um resultado positivo prova que a página inteira cumpre a WCAG?
Não. Ele verifica um único par sólido. Uma auditoria completa também cobre tipografia, teclado, rótulos, imagens, estados e outros requisitos de acessibilidade.
Por que cores transparentes são rejeitadas?
Porque o resultado visível depende das camadas inferiores. Componha primeiro a transparência sobre o fundo final e teste as duas cores opacas resultantes.
Ferramentas relacionadas
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/color-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/verify/color-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/verify/color-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/color-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/color-contrast", 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
{
"foreground": "#111827",
"background": "#ffffff"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "verify.color_contrast",
"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.
Limites
max_color_chars | 100 |
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. |
Notas técnicas
Use o resultado sem transformar um teste em certificado
Em um design system ou processo de integração contínua, a API recebe os mesmos dois campos e devolve exatamente o mesmo objeto estruturado para que a regra possa ser automatizada.
Casos de integração
Regra automática no desenvolvimento
Use a API no fluxo de integração para barrar combinações abaixo do requisito WCAG definido pelo produto.