ForHosting KIT · Validar e conferir

Verificador de contraste de cores

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.

● BetaGrátis · no seu navegador

Executar grátis Ver a API

Use pelo WebAPIE-mailApp em breveTelegram em breve

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. 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 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.

Regra automática no desenvolvimento

Use a API no fluxo de integração para barrar combinações abaixo do requisito WCAG definido pelo produto.

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. Pela API, cada solicitação concluída custa US$ 0,002 e usa o saldo pré-pago do KIT.

O aplicativo móvel nativo usa o cálculo gratuito do navegador?

Não. O aplicativo nativo chama a API e mostra o preço daquela tarefa. 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.

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/verify/color-contrast

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 &#39;{"items":["valor-1","valor-2"]}'

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({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
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[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
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" => &#39;{"items":["valor-1","valor-2"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
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

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

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

por chamadaUS$ 0,002

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.

Ver a documentação completa do KIT →

Executar grátis