Nota letra da taxa de contraste
Transforme o contraste de um par de cores em uma letra para suas revisões: #111827 sobre branco chega a 17.74 para 1 e recebe A, porque a nota A começa em 12 para 1. As notas vão de A a E e, abaixo disso, reprovado. 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
- Primeiro plano
- #111827
- Fundo
- #ffffff
- Razão de contraste
- 17,74
- Nota
- A
- Rótulo da classificação
- Excellent
- Faixa mínima
- 12
Esta ferramenta de nota em letra do ratio de contraste recebe duas cores hexadecimais —primeiro plano e fundo—, calcula o ratio de contraste oficial WCAG 2.x e o mapeia numa escala fixa de letras de A a E até fail. Designers, desenvolvedores e revisores de acessibilidade costumam querer uma única letra para uma revisão de design, uma planilha de tokens ou o resumo de um pull request, não só o ratio bruto e os booleanos AA/AAA. O motor segue a luminância relativa: cada canal sRGB é linearizado, a luminância é ponderada com os coeficientes 0.2126, 0.7152 e 0.0722, e o ratio é (mais claro mais 0.05) sobre (mais escuro mais 0.05). As faixas são determinísticas: A começa em doze para um, B em sete (AAA texto normal), C em quatro ponto cinco (AA texto normal), D em três (AA texto grande), E em dois, e o que for mais fraco é fail. Os resultados nunca dependem de rede, amostragem aleatória ou do relógio.
O que significa uma nota em letra de contraste e o que a resposta contém
Uma nota em letra de contraste comprime o ratio WCAG contínuo numa etiqueta ordinal curta que as partes interessadas conseguem ler sem memorizar tabelas de limiares. A nota A significa que o par atinge pelo menos doze para um —bem acima de AAA para texto normal e perto do topo prático de pares sRGB legíveis, salvo preto puro sobre branco puro—. A nota B significa pelo menos sete para um, o limiar AAA para texto normal.
A nota C significa pelo menos quatro ponto cinco para um, o limiar AA familiar do corpo de texto. A nota D significa pelo menos três para um, que ainda supera AA para texto grande, mas é fraco demais para tipografia de corpo pequena sob as mesmas diretrizes. A nota E significa pelo menos dois para um: resta alguma diferença de luminância, mas o par falha em todos os critérios WCAG de contraste de texto.
A nota fail significa ratio abaixo de dois para um —incluindo cores idênticas em um para um—, portanto o par não deve ser usado para texto ou ícones significativos nessa superfície. Não há rastreio de página, mistura de opacidade nem amostragem de gradientes: você envia dois hex explícitos e recebe uma nota reproduzível adequada a tickets, tokens de design e portões automatizados.
Contrato de entrada, análise hex e lógica de faixas reproduzível
Ambos os valores devem ser hex: hash opcional, três dígitos que expandem para seis (#abc vira #aabbcc) ou seis dígitos completos, sem distinção de maiúsculas. Sufixos alfa, funções rgb(), hsl(), cores CSS nomeadas e inteiros soltos são rejeitados com mensagem que nomeia o campo e mostra o que foi recebido. Cada cor é limitada a trinta e dois caracteres para validar barato e bloquear colagens acidentais de CSS longo.
Após a análise, os canais são linearizados com a curva sRGB por partes da WCAG —dividir por 12.92 abaixo do limiar 0.04045; caso contrário elevar ((c mais 0.055) sobre 1.055) à potência 2.4— e combinados em luminância relativa. A nota vem do ratio em ponto flutuante sem arredondar, de modo que um 6.99 exibido não possa reivindicar a faixa B se o ratio real ainda estiver abaixo de sete.
As faixas são constantes fixas no código; não há chave de configuração que mude a escala por solicitação, o que mantém goldens, asserções de CI e rubricas estáveis bit a bit.
Onde as notas em letra se encaixam em sistemas de design, revisões e CI
Equipes de produto costumam precisar de uma pontuação de um caractere para painéis e listas de revisão de design quando uma matriz AA/AAA completa é larga demais para uma coluna de planilha ou um badge de status. Engenheiros ligam o mesmo contrato a checagens de pull request que bloqueiam mudança de token se o texto principal do corpo cair abaixo da nota C, ou avisam quando títulos grandes descem para D.
Especialistas de QA e acessibilidade anexam a nota mais o ratio numérico a relatórios de bug para corrigir o par exato em vez de adivinhar a partir de uma captura. Equipes de conteúdo e marketing verificam se os hex de campanha ainda alcançam pelo menos C sobre fundos claros ou escuros do site. Combine com um verificador completo de matriz AA/AAA quando precisar de flags booleanas de conformidade, e com utilitários de conversão de cor quando tiver de derivar hex de RGB ou HSL antes de avaliar.
Casos de uso
Painéis de tokens de design
Avalie com uma única letra cada par de primeiro plano/fundo de uma paleta de marca para temas claros e escuros antes de travar os tokens.
Perguntas frequentes
Como as notas em letra são mapeadas a partir do ratio de contraste?
A ≥ 12, B ≥ 7 (AAA normal), C ≥ 4.5 (AA normal), D ≥ 3 (AA grande), E ≥ 2, fail abaixo de 2. As faixas usam o ratio WCAG sem arredondar; o ratio exibido é arredondado a duas casas decimais.
Em que isso difere de um verificador de contraste WCAG AA/AAA?
Um verificador AA/AAA devolve booleanos de aprovação/reprovação para texto normal e grande. Esta ferramenta mapeia o mesmo ratio WCAG numa escala de letras A–E/fail para painéis e badges.
Esta ferramenta varre o meu site em busca de problemas de contraste?
Não. Ela só avalia duas cores hex que você fornece.
Quais formatos de cor a ferramenta de nota de contraste aceita?
Apenas cores hexadecimais de três ou seis dígitos, com ou sem a cerquilha inicial, em maiúsculas ou minúsculas. Nomes de cores, notação RGB ou HSL e transparência são recusados, então um valor errado nunca recebe nota.
O que significa a nota E?
Significa que o par chega a pelo menos dois para um: ainda há alguma diferença de luminosidade, mas ele reprova em todos os critérios de contraste de texto das WCAG. Abaixo disso, a nota é reprovado.
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/color/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
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/color/contrast-grade",
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/color/contrast-grade", 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/color/contrast-grade", 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": "color.contrast_grade",
"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. |
Notas técnicas
Use o caminho gratuito do navegador para oficinas de paleta e tokens, ou a API a US$ 0,002 por solicitação bem-sucedida quando a CI e os sistemas de design precisarem da mesma matriz de notas sempre.
O que significa uma nota em letra de contraste e o que a resposta contém
A resposta ecoa cada cor como hex #rrggbb em minúsculas normalizado e uma string rgb(r, g, b), reporta contrast_ratio arredondado a duas casas decimais, devolve as strings grade e grade_label, expõe band_min como o piso numérico da faixa vencedora e marca method como wcag_contrast_letter_grade para os roteadores distinguirem esta página de um verificador só AA/AAA. Hex inválido, campos ausentes, valores que não são string e strings longas demais geram invalid_input e nunca são cobrados.
Contrato de entrada, análise hex e lógica de faixas reproduzível
Envie um objeto JSON com foreground para a cor do texto ou ícone e background para a superfície atrás. Os aliases fg, color1, text e hex1 mapeiam para a primeira cor; bg, color2 e hex2 para a segunda, para formulários e planilhas manterem os nomes de coluna.
Onde as notas em letra se encaixam em sistemas de design, revisões e CI
Designers colam pares hex do Figma ou de um JSON de tokens e leem de A a fail antes de fixar uma escala para temas claros e escuros. Nesta página o trabalho roda inteiro no seu navegador; pela API cada consulta bem-sucedida custa US$ 0,002, validação falha não é cobrada e nada é armazenado após a resposta. Essa divisão —exploração interativa gratuita e API paga idêntica— alinha-se ao catálogo tier A do KIT.
Casos de integração
Badges de contraste em pull requests
Chame a API a partir da CI para falhar builds quando pares hex do corpo principal caírem abaixo da nota C (faixa AA de texto normal).
Resumos de revisão de acessibilidade
Anexe grade, grade_label e contrast_ratio aos tickets para revisores e engenheiros compartilharem uma nota curta mais o ratio numérico.
Perguntas técnicas
Quanto custa a ferramenta de nota em letra do ratio de contraste?
É grátis no seu navegador nesta página. Pela API, uma solicitação bem-sucedida custa US$ 0,002; entradas inválidas não são cobradas.
Quais formatos de cor são aceitos?
Somente hex: #RGB ou #RRGGBB, com ou sem o hash inicial, sem distinção de maiúsculas. rgb(), hsl(), cores nomeadas e hex com alfa são rejeitados com invalid_input.