Verificador de Contraste de Cores
Verifique a razão de contraste entre uma cor de texto e uma de fundo segundo WCAG AA e AAA. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.
O que é a razão de contraste de cores?
A razão de contraste compara a luminância relativa de duas cores em uma escala de 1:1 (idênticas) a 21:1 (preto sobre branco). As diretrizes de acessibilidade WCAG a usam para decidir se um texto é legível para pessoas com baixa visão ou deficiências de cor: o nível AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande, o nível AAA eleva isso para 7:1 e 4.5:1, e ícones, bordas de inputs e outros gráficos com significado precisam de 3:1. Este verificador calcula a razão com a fórmula da WCAG, diz quais critérios um par de cores atende e, quando não chega lá, sugere a cor de texto mais próxima que passa, mantendo seu matiz.
Exemplos
A fórmula de luminância relativa e contraste da WCAG, e onde mais encontrá-la:
const lin = (c) => (c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
const lum = ([r, g, b]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
const [hi, lo] = [lum(fg), lum(bg)].sort((a, b) => b - a);
const ratio = (hi + 0.05) / (lo + 0.05);def lin(c):
c /= 255
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def lum(r, g, b):
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)function lin($c) { $c /= 255; return $c <= 0.04045 ? $c / 12.92 : (($c + 0.055) / 1.055) ** 2.4; }
function lum($r, $g, $b) { return 0.2126 * lin($r) + 0.7152 * lin($g) + 0.0722 * lin($b); }func lin(_ c: Double) -> Double {
let v = c / 255
return v <= 0.04045 ? v / 12.92 : pow((v + 0.055) / 1.055, 2.4)
}Casos de uso
Revisar um design antes do handoff
Verifique cada par de texto e fundo de um mockup, assim os problemas de acessibilidade são corrigidos no design e não descobertos em uma auditoria depois do lançamento.
Escolher cores de marca acessíveis
Descubra se uma cor de marca serve para texto corrido ou apenas para títulos grandes e decoração, e ajuste a luminosidade até passar.
Corrigir apontamentos de auditoria
Auditorias automáticas como o Lighthouse sinalizam texto com baixo contraste. Cole aqui as cores reportadas para ver por quanto falham e testar uma substituta.
Verificar estados e modo escuro
Texto em hover, desabilitado e placeholders, e cada cor do tema escuro, precisam de sua própria verificação. Inverta as cores para testar pares invertidos rapidamente.