Verificador de contraste de cores
Informe a cor do texto e a cor do fundo para obter a taxa de contraste WCAG e a aprovação ou reprovação em AA e AAA, para texto normal e grande, com pré-visualização ao vivo.
Funciona no seu navegador; nada do que você digita sai do seu dispositivo
Taxa de contraste –
| Uso | Exige | Resultado |
|---|---|---|
| Texto normal, AA | 4.5:1 | |
| Texto normal, AAA | 7:1 | |
| Texto grande, AA | 3:1 | |
| Texto grande, AAA | 4.5:1 |
Usa a taxa de contraste da WCAG 2.x, que mede apenas o contraste de luminância. Ela não avalia combinações problemáticas para daltonismo, como vermelho sobre verde, fontes finas ou pequenas, nem texto sobre imagens e degradês. Lê HEX (3, 4, 6 ou 8 dígitos), rgb(), hsl() e nomes de cores CSS; outras sintaxes de cor CSS são lidas pelo seu navegador quando ele consegue.
Como verificar o contraste de cores
- Digite ou cole a cor do texto e a cor do fundo como HEX,
rgb(),hsl()ou um nome de cor CSS comonavy, ou escolha cada uma com o seletor de cores. - Veja a taxa de contraste, de 1:1 para nenhum contraste até 21:1 para preto sobre branco.
- Consulte a tabela: texto normal exige 4,5:1 para AA e 7:1 para AAA, e texto grande exige 3:1 para AA e 4,5:1 para AAA. A pré-visualização mostra como o texto fica.
O que significa a taxa de contraste
A taxa de contraste da WCAG compara o brilho de duas cores. Cada cor é convertida em uma luminância relativa entre 0 (preto) e 1 (branco), usando os valores sRGB sem a curva de gama e com os três canais ponderados pelo brilho que o olho percebe: o verde mais, depois o vermelho e por fim o azul. A taxa é a luminância mais clara somada a 0,05, dividida pela luminância mais escura somada a 0,05, e por isso vai de 1:1 para cores idênticas até 21:1 para preto sobre branco.
A WCAG 2 define mínimos conforme o tamanho do texto. Texto normal exige 4,5:1 no nível AA e 7:1 no nível AAA, mais rigoroso. Texto grande, que é mais fácil de ler, exige 3:1 para AA e 4,5:1 para AAA. Grande significa pelo menos 24 px, ou cerca de 18,7 px em negrito.
A taxa considera apenas a luminosidade. Duas cores podem passar e ainda assim ser difíceis de distinguir para pessoas com daltonismo, e fontes finas ou texto sobre uma foto podem precisar de mais contraste que o mínimo. Use o valor como piso e confira a pré-visualização.
Para desenvolvedores / agentes de IA
Precisa verificar o contraste em código, numa etapa de build ou a partir de um agente de IA? Existe uma API para isso: veja o guia da API do verificador de contraste de cores.
Dicas
- Precisa antes converter uma cor entre HEX, RGB, HSL e CMYK? Use o Conversor de cores.
- Vai montar um conjunto de cores que combinam? O Gerador de paleta de cores mostra o contraste com branco e preto de cada amostra.
- Precisa da cor de um pixel de uma captura de tela? Use o Seletor de cores de imagem.
Perguntas frequentes
Como a taxa de contraste é calculada?
Com a fórmula da WCAG 2.x: a luminância relativa de cada cor é calculada a partir dos seus valores sRGB, e a taxa é (mais claro + 0,05) dividido por (mais escuro + 0,05). Ela vai de 1:1 (nenhum contraste) a 21:1 (preto sobre branco). A taxa é mostrada com duas casas decimais e o valor sem arredondamento aparece ao lado.
Quais taxas AA e AAA exigem?
Texto normal exige 4,5:1 para AA e 7:1 para AAA. Texto grande, ou seja, com pelo menos 24 px em peso normal ou cerca de 18,7 px em negrito, exige 3:1 para AA e 4,5:1 para AAA. A taxa não é arredondada para cima para passar o limite: 4,499:1 aparece como 4,49 e reprova em AA para texto normal.
Por que #777777 sobre branco reprova em AA?
O contraste é 4,48:1, logo abaixo dos 4,5:1 que o AA pede para texto normal, então reprova para o texto do corpo, mas passa para texto grande, que exige só 3:1. Um cinza um pouco mais escuro, como #767676, chega a 4,54:1 e passa.
O que acontece com cores transparentes?
Uma cor de texto parcialmente transparente é misturada primeiro com o fundo, do jeito que a tela a mostra, e a cor resultante é medida. Um fundo parcialmente transparente é considerado sobre branco. Os canais são arredondados para números inteiros depois da mistura.
Uma taxa aprovada significa que o texto é acessível?
Não por si só. A taxa mede apenas o contraste de luminosidade. Ela não diz nada sobre combinações problemáticas para daltonismo, fontes muito finas, texto sobre fotos ou degradês, nem sobre a cor ser a única forma de transmitir um significado. Trate-a como um mínimo, não como uma garantia.
Algo é enviado a um servidor?
Não. As cores são lidas e medidas no seu navegador, e nada do que você digita sai do seu dispositivo.