Diferença de brilho W3C
Compare duas cores com o teste histórico de brilho do W3C: o preto contra o branco difere em 255, bem acima dos 125 necessários para passar. Útil para refazer auditorias antigas; para decisões atuais de acessibilidade, use uma verificação de contraste WCAG. 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 1
- #000
- Cor 2
- #fff
- Cor 1
- #000000
- Cor 2
- #FFFFFF
- Brilho 1
- 0
- Brilho 2
- 255
Esta calculadora compara duas cores hexadecimais com a fórmula histórica de brilho percebido associada ao rascunho AERT do W3C. Ela converte cada cor em um valor ponderado, calcula a diferença absoluta e informa se o resultado é maior que 125. A resposta determinística inclui cores normalizadas, os dois brilhos, a diferença, o limite e a decisão. É útil para auditorias antigas, mas não substitui a relação de contraste das WCAG atuais.
O que o teste histórico de brilho mede
O teste estima quanto cada cor parece clara ou escura ao atribuir pesos diferentes aos canais vermelho, verde e azul. A visão humana é mais sensível ao verde, depois ao vermelho e por fim ao azul; por isso, a conta usa 299 para vermelho, 587 para verde e 114 para azul, dividindo a soma por 1000. A capacidade calcula os dois brilhos e toma a diferença absoluta.
O resultado só é aprovado quando supera 125; exatamente 125 é reprovação. A ordem das cores não muda a decisão. Essa conta mede somente a separação de brilho: ela não executa a fórmula legada complementar de diferença de cor nem produz a relação de contraste exigida pelas WCAG modernas.
Use-a quando você precisar reproduzir uma regra histórica, comparar uma ferramenta antiga ou manter um sistema cujo critério mencione explicitamente essa fórmula. Em projetos novos de acessibilidade, trate o resultado como informação adicional, e não como uma declaração completa de conformidade.
Como informar as cores e ler a resposta
Informe cada entrada na notação RGB hexadecimal, sempre com cerquilha no início. A forma curta de três dígitos, como #0AF, e a forma completa de seis, como #00AAFF, são aceitas. Valores curtos são expandidos pela repetição de cada dígito, e as cores retornam normalizadas com seis dígitos maiúsculos.
Canais alfa, nomes CSS, funções rgb(), espaços e valores sem cerquilha são rejeitados em vez de interpretados por suposição.
Como aplicar o resultado em auditorias e automações
Guarde as cores normalizadas e a diferença retornada no registro da auditoria para que outra pessoa possa reproduzir a decisão sem depender de uma captura de tela ou do analisador de cores do navegador. Em automações, consulte passes e aproveite os valores detalhados em relatórios e diagnósticos. Uma reprovação significa apenas que o par não supera o limite histórico; uma aprovação significa somente que supera.
Nenhuma delas comprova um nível WCAG moderno, pois as regras atuais usam luminância relativa, relação de contraste e limites que variam conforme o texto. Se o projeto exigir os dois critérios, execute este cálculo como verificação legada e faça um teste WCAG separado.
Casos de uso
Reproduzir uma auditoria de acessibilidade antiga
Refaça um resultado histórico com a fórmula ponderada exata e a comparação estritamente maior.
Revisar sistemas de design arquivados
Registre como paletas antigas se saíam no teste de brilho vigente quando foram criadas.
Perguntas frequentes
Qual fórmula esta calculadora usa?
Ela calcula (299 × vermelho + 587 × verde + 114 × azul) / 1000 para cada cor e depois obtém a diferença absoluta.
Qual valor é aprovado no teste legado?
A diferença de brilho precisa ser maior que 125. Um resultado exatamente igual a 125 é reprovado.
A aprovação garante o contraste WCAG atual?
Não. As WCAG modernas usam luminância relativa e uma relação de contraste; este é outro teste, de caráter histórico.
Quais formatos de cor são aceitos?
Use a notação hexadecimal #RGB ou #RRGGBB. Alfa, nomes CSS, sintaxe rgb() e espaços externos não são aceitos.
A ordem das cores faz diferença?
Não. Como a diferença é absoluta, inverter as cores mantém a diferença e a decisão.
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/brightness-diff-w3c \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color_1":"#000000","color_2":"#FFFFFF"}'const res = await fetch("https://api.kit.forhosting.com/color/brightness-diff-w3c", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color_1": "#000000",
"color_2": "#FFFFFF"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/brightness-diff-w3c",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color_1": "#000000",
"color_2": "#FFFFFF"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/brightness-diff-w3c", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color_1":"#000000","color_2":"#FFFFFF"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color_1":"#000000","color_2":"#FFFFFF"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/brightness-diff-w3c", 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
{
"color_1": "#000000",
"color_2": "#FFFFFF"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.brightness_diff_w3c",
"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 | 7 |
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
Como informar as cores e ler a resposta
A resposta mostra brightness_1 e brightness_2 na escala de 0 a 255, brightness_difference como distância absoluta, threshold igual a 125 e passes como booleano. Os números exibidos são arredondados para três casas para manter o JSON estável, mas a decisão usa o valor não arredondado. Assim, a apresentação nunca altera um caso próximo do limite. Trocar color_1 por color_2 apenas troca os brilhos individuais; a diferença e a decisão continuam iguais.
Como aplicar o resultado em auditorias e automações
Cada chamada de API custa US$ 0,002; no navegador, o mesmo solucionador determinístico opera sem rede, aleatoriedade, horário ou estado oculto.
Casos de integração
Proteger testes de regressão
Compare pares de cores consolidados e detecte mudanças em uma regra legada de aceitação.
Perguntas técnicas
Quanto custa uma chamada de API?
Cada chamada de API custa US$ 0,002. O cálculo no navegador roda localmente com a mesma lógica determinística.