Verificador de contraste de cor

O que é Verificador de contraste de cor?

O Verificador de contraste de cor é uma ferramenta on-line gratuita de relação de contraste WCAG para designers, desenvolvedores e testadores de acessibilidade. Ele recebe uma cor de primeiro plano (texto) e uma de fundo, calcula a luminância relativa de cada uma e informa a relação de contraste como um valor de 1:1 a 21:1. Em seguida, indica se essa relação atende ao nível AA do WCAG 2.1 (4.5:1 normal, 3:1 grande) e ao nível AAA (7:1 normal, 4.5:1 grande) e renderiza as duas cores em uma pré-visualização ao vivo com texto de exemplo para que você avalie a legibilidade num relance. Use-o para verificar se o corpo de texto, botões, links e rótulos estão legíveis antes de publicar um design.

Como usar Verificador de contraste de cor

1. Digite ou cole a cor de primeiro plano (texto) como valor HEX, ou clique no seletor de cor nativo para escolhê-la visualmente.
2. Faça o mesmo para a cor de fundo sobre a qual o texto fica.
3. Leia a saída da relação de contraste, exibida como um valor do tipo 4.5:1 (1:1 são cores idênticas, 21:1 é preto puro sobre branco).
4. Confira os selos AA e AAA para texto normal e para texto grande (18pt / 14pt em negrito ou mais) para ver quais níveis passam.
5. Veja a pré-visualização com texto de exemplo renderizada com suas duas cores para confirmar que o texto é confortavelmente legível.
6. Ajuste qualquer uma das cores até atingir o nível de contraste de que seu design precisa.

Exemplos

Primeiro plano #595959, Fundo #ffffff

Relação 7.00:1 — passa em AA e AAA para texto normal e grande

Primeiro plano #999999, Fundo #ffffff

Relação 2.85:1 — reprova em AA normal e AAA, não atende a nada do exigido para corpo de texto

Primeiro plano #767676, Fundo #ffffff

Relação 4.54:1 — passa em AA normal e AA grande, mas reprova em AAA normal

Perguntas frequentes

Quais relações de contraste o WCAG exige?

O nível AA do WCAG 2.1 precisa de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rígido: 7:1 para texto normal e 4.5:1 para texto grande. Este verificador mostra um selo de aprovação/reprovação para cada um desses quatro limites.

O que conta como texto grande?

O WCAG define texto grande como 18pt (cerca de 24px) ou mais, ou 14pt (cerca de 18.66px) ou mais quando em negrito. O texto grande tem uma exigência de contraste menor porque glifos maiores são mais fáceis de ler, e é por isso que os selos de texto grande podem passar quando os de texto normal não passam.

Como a relação de contraste é calculada?

Ela usa a fórmula oficial do WCAG: a luminância relativa de cada cor é calculada a partir de seus canais sRGB linearizados, e a relação é (mais clara + 0.05) / (mais escura + 0.05). O resultado varia de 1:1 (cores idênticas) a 21:1 (preto sobre branco).

Ele suporta alfa, RGB ou cores nomeadas?

A entrada é somente HEX (#rgb abreviado ou #rrggbb), com um seletor de cor nativo para cada campo. Ele não considera alfa/opacidade nem transparência parcial — combine primeiro as camadas semitransparentes em uma cor sólida e depois verifique-a.

Minhas cores são enviadas a um servidor?

Não. Os cálculos de luminância e relação são executados inteiramente no seu navegador com JavaScript — nenhuma cor é enviada e nada é transmitido a um servidor, então funciona de forma privada e até offline depois que a página é carregada.