Verificador de Contraste de Cores
Verifique a taxa de contraste entre duas cores em relação aos padrões WCAG AA e AAA.
Como usar Verificador de Contraste de Cores
- Informe a cor do seu texto (HEX ou RGB).
- Informe a cor de fundo.
- Veja a taxa de contraste e quais níveis WCAG ela atende.
Sobre Verificador de Contraste de Cores
Se um texto é legível sobre seu fundo é algo mensurável, não uma questão de gosto. As diretrizes de acessibilidade WCAG expressam isso como uma taxa de contraste, que vai de 1:1 (duas cores idênticas) a 21:1 (preto sobre branco). Informe uma cor de texto e uma cor de fundo em HEX (#137256 ou #137) ou RGB (rgb(19,114,86)), e este verificador informa a taxa exata com duas casas decimais, junto com aprovação ou reprovação em quatro limites: 4,5:1 e 7:1 para texto normal (AA e AAA), e 3:1 e 4,5:1 para texto grande.
O cálculo é a fórmula oficial de luminância relativa da WCAG — cada canal é linearizado e, em seguida, ponderado pela forma como o olho percebe o brilho — então o valor corresponde ao que as ferramentas oficiais de auditoria de acessibilidade informam. A taxa sempre compara a cor mais clara com a mais escura, o que significa que trocar os dois campos entre si gera exatamente o mesmo número.
Ele compara duas cores sólidas, então não pode avaliar um texto sobre uma foto, um gradiente ou uma sobreposição semitransparente; para esses casos, amostre primeiro o pixel atrás do texto. Ele também não escaneia uma página ao vivo — você é quem fornece as cores. Para converter um valor antes de colá-lo, use o conversor de cores, e para montar uma paleta aprovada em torno de uma cor de marca, experimente o gerador de tons. Nada é enviado.
Perguntas frequentes
De qual taxa de contraste eu preciso?
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande, para atender ao WCAG AA. O AAA eleva esses valores para 7:1 e 4,5:1, respectivamente. O verificador testa os quatro ao mesmo tempo, então você pode ver exatamente quais níveis o seu par de cores atende.
O que conta como texto grande?
Aproximadamente 18pt (24px) em peso normal, ou 14pt (18,66px) em negrito ou acima disso. Qualquer coisa menor é tratada como texto normal e precisa atender ao limite mais rigoroso.
Quais formatos de cor posso informar?
HEX em três ou seis dígitos (#137 ou #137256) e RGB, como rgb(19,114,86). Qualquer um dos campos aceita qualquer um dos formatos, então você pode misturá-los.
Importa em qual campo eu coloco qual cor?
Não. A fórmula divide a luminância mais clara pela mais escura, então a taxa é idêntica não importa em que ordem você as informe.
Por que meu texto ainda parece difícil de ler mesmo passando no teste?
A taxa mede apenas as duas cores que você forneceu. Pesos de fonte finos, tamanhos pequenos, telas de baixa qualidade e texto sobre imagens carregadas prejudicam a legibilidade sem alterar o número, então trate a aprovação como um piso mínimo, não como uma garantia.