ForHosting KIT · Monitorar sites

Verificar contraste de cores

Este verificador compara uma cor de primeiro plano com uma cor de fundo usando a fórmula de luminância relativa das WCAG.

● BetaGrátis · no seu navegador

Executar grátis Ver a API

Use pelo WebAPIE-mailTelegramApp em breve

Informe cores hexadecimais de três ou seis dígitos para receber a taxa de contraste e resultados objetivos para AA e AAA em textos comuns e grandes. Ele ajuda você a revisar componentes, registrar decisões de acessibilidade e encontrar combinações difíceis de ler antes da publicação.

Entenda corretamente o resultado

A taxa retornada representa a diferença de luminância relativa entre a cor mais clara e a mais escura. O valor 1:1 indica luminâncias iguais; o máximo é 21:1 para preto e branco. As WCAG adotam limites diferentes porque textos grandes ou mais pesados continuam legíveis com menos contraste. AA exige 4.5:1 para texto comum e 3:1 para texto grande; AAA exige 7:1 e 4.5:1. A resposta avalia cada requisito separadamente. Pelas WCAG, texto grande tem pelo menos 18 pontos, ou 14 pontos quando está em negrito. Não arredonde o resultado para cima ao decidir conformidade. A taxa exibida tem duas casas decimais, mas as aprovações usam o cálculo completo, evitando que uma combinação logo abaixo do limite seja aceita por arredondamento.

Use o primeiro plano e o fundo reais

Teste as cores que a pessoa realmente enxerga, não apenas duas amostras próximas na paleta. Em um parágrafo, o primeiro plano é a cor renderizada do texto e o fundo é a cor sólida final atrás dele. Verifique links nos estados padrão, visitado, foco, acionamento e desabilitado quando ainda transmitirem informação. Inclua botões, selos, alertas, formulários, gráficos e navegação. Esta ferramenta aceita cores opacas #RGB ou #RRGGBB. Se a interface usa transparência, gradiente, imagem, sombra ou mesclagem, determine primeiro as cores renderizadas no ponto avaliado. Em fundos variáveis, teste a região de menor contraste. Contraste é apenas parte da acessibilidade: foco visível, contraste não textual e alternativas ao uso exclusivo de cor precisam de avaliações próprias.

Inclua a verificação no seu fluxo

Faça a verificação ainda no design, quando alterar um token ou componente custa pouco, e repita o teste sempre que temas ou cores da marca mudarem. Designers podem comparar opções antes da entrega; a equipe de desenvolvimento pode chamar o mesmo cálculo determinístico em testes e guardar os indicadores com os registros do componente. Uma auditoria útil cruza cada cor semântica de primeiro plano com todos os fundos permitidos, não só com a combinação de demonstração. Registre o tamanho e o peso do texto, pois um par aprovado para texto grande pode reprovar em rótulos comuns. A API custa US$ 0,002 por solicitação, e o executor no navegador atende verificações rápidas. Cores malformadas são recusadas, revelando dígitos inválidos, alfa, nomes CSS e outros erros antes que entrem em relatórios.

Casos de uso

Revisar uma entrega de design

Confirme se as cores propostas para texto e superfície atendem ao nível WCAG pretendido antes da implementação.

Auditar tokens de design

Teste tokens semânticos de primeiro plano contra todos os fundos autorizados pelo sistema de componentes.

Proteger uma versão

Use o verificador determinístico em testes automáticos e bloqueie mudanças que reduzam o contraste obrigatório.

Perguntas frequentes

Quais formatos de cor são aceitos?

Use notação hexadecimal opaca #RGB ou #RRGGBB. Nomes CSS, alfa, funções rgb(), gradientes e valores inválidos são recusados.

Quais são os limites WCAG AA?

AA exige no mínimo 4.5:1 para texto comum e 3:1 para texto grande.

Quais são os limites WCAG AAA?

AAA exige pelo menos 7:1 para texto comum e 4.5:1 para texto grande.

Por que uma taxa exibida no limite pode reprovar?

A exibição usa duas casas, mas a decisão mantém a precisão completa e não aprova um valor ligeiramente inferior.

Trocar o primeiro plano pelo fundo altera a taxa?

Não. A fórmula compara as luminâncias clara e escura, portanto inverter cores opacas preserva a taxa e os resultados.

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

POSThttps://api.kit.forhosting.com/web/color-contrast-check

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/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-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

{
  "foreground": "#1a1a1a",
  "background": "#ffffff"
}

Exemplo de resposta

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_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

por chamadaUS$ 0,002

Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.

Limites

`timeout_sec`	30
`max_crawl_pages`	25

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.

Ver a documentação completa do KIT →