Verificador de contraste de cores para WCAG 2.2 AA e AAA

Como usar

Digite a cor do texto em Cor do texto e a cor atrás dele em Cor de fundo.
Leia Razão de contraste. As quatro verificações de texto e a verificação de componente dizem quais níveis o par atinge.
Para texto corrido, procure AA, texto normal. Texto grande precisa de menos contraste; os tamanhos estão nas seções abaixo.
Se uma verificação falhar, parta de Cor de texto sugerida e teste o resultado no seu projeto real.

Como a razão é calculada

A WCAG 2.2 dá a cada cor uma luminância relativa. Cada valor de vermelho, verde e azul é primeiro linearizado: um valor de no máximo 0,04045 (em uma escala de 0 a 1) é dividido por 12,92, e um valor maior é elevado à potência 2,4 depois de somar 0,055 e dividir por 1,055. Os três resultados são então ponderados: 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul. A razão de contraste é a luminância da cor mais clara mais 0,05, dividida pela luminância da cor mais escura mais 0,05.

O resultado vai de 1, para duas cores idênticas, a 21, para preto sobre branco.

L = 0,2126 × R + 0,7152 × G + 0,0722 × B
razão = (L1 + 0,05) ÷ (L2 + 0,05)

L1  luminância da cor mais clara
L2  luminância da cor mais escura

Os níveis

A WCAG 2.2 fixa estas razões mínimas. O nível e o critério de sucesso são mostrados para que você possa consultar o texto exato.

AA, texto normal: 4,5:1 (critério de sucesso 1.4.3).
AA, texto grande: 3:1, para texto de 18 pontos, ou 14 pontos em negrito (1.4.3).
AAA, texto normal: 7:1 (critério de sucesso 1.4.6).
AAA, texto grande: 4,5:1 (1.4.6).
Botões, bordas e ícones de que o leitor precisa para usar a página: 3:1 (1.4.11).

O que este verificador não cobre

Texto sobre fotos, imagens e gradientes: o fundo muda ao longo do texto, então confira os pixels reais ali.
Cores transparentes: informe a cor que o leitor realmente vê na página.
Estados de foco, de passagem do mouse e outros: confira também as cores de cada estado.
Se o texto é grande para o leitor: o tamanho e a espessura da fonte decidem isso, e a página não os conhece.

Exemplo resolvido: cinza #777 sobre branco

O cinza #777 tem cada canal em 119 de 255, o que dá uma luminância relativa de cerca de 0,184. O branco tem luminância 1, então a razão é (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.

Assim, #777 sobre branco não passa no AA para texto normal por uma pequena margem, passa no AA para texto grande e na verificação de 3:1 para componentes, e não passa no AAA. O cinza mais escuro mais próximo que passa no AA é #767676, com razão de 4,54.

Verificação	Precisa de	#777 sobre branco
AA, texto normal	4,5:1	4,48: não passa
AA, texto grande	3:1	Passa
AAA, texto normal	7:1	Não passa
AAA, texto grande	4,5:1	Não passa
Botões, bordas e ícones	3:1	Passa

Perguntas frequentes

Que razão de contraste o texto corrido precisa?

Para o nível AA da WCAG 2.2, texto normal precisa de pelo menos 4,5:1 e texto grande precisa de 3:1. O nível AAA pede 7:1 para texto normal e 4,5:1 para texto grande.

Por que uma razão de 4,4999 aparece como 4,50 e ainda assim não passa?

A verificação usa a razão exata, não as duas casas decimais da tela. Uma razão logo abaixo de 4,5 aparece como 4,50, mas não chega a 4,5:1, então a verificação não passa.

A ordem das duas cores muda a razão?

Não. A razão é a mesma, seja qual for a cor do texto e a do fundo, porque a cor mais clara é sempre o numerador.

O que é a cor sugerida?

É a cor de texto mais próxima da sua em claridade que atinge 4,5:1 no seu fundo. Ela mantém o mesmo matiz e a mesma saturação, e fica mais escura ou mais clara, o que for a menor mudança.

Posso informar uma cor com transparência?

Não aqui. Informe a cor que o visitante realmente vê, que é a cor transparente já misturada com o fundo atrás dela.

As minhas cores são enviadas para algum servidor?

Não. O cálculo roda no seu navegador, e nada do que você informa é guardado ou enviado.

Uma razão que passa significa que o texto é fácil de ler?

Nem sempre. A razão é o mínimo que a WCAG estabelece. O tamanho, a espessura e o espaçamento da fonte, e a visão do leitor, também contam, então teste o projeto real com pessoas sempre que puder.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.

Resultado