Verificador de Contraste de Cores

Como usar o verificador de contraste

Digite a cor do texto no primeiro campo e a do fundo no segundo. Cada campo aceita HEX (#5271FF), rgb(), hsl() e os 148 nomes de cor do CSS, como tomato. O quadrado ao lado abre o seletor do sistema, e o botão do meio troca o texto com o fundo.

O número grande é a razão de contraste, de 1:1 (cores iguais) a 21:1 (preto sobre branco). A tabela mostra se ela passa no AA e no AAA para cada tipo de elemento, e a prévia aplica o par a um título, a um parágrafo e a um botão. Quando o texto não chega a 4,5:1, o botão de ajuste escurece ou clareia só o texto, mantendo o matiz, até passar no AA com a menor mudança possível.

O que é a razão de contraste

A razão compara a luminância relativa das duas cores, que mede o quanto cada uma parece clara para o olho. A fórmula do WCAG 2.2 é (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância da cor mais clara e L2 a da mais escura. O 0,05 evita a divisão por zero e leva em conta a luz ambiente que reflete na tela.

A luminância é 0,2126 × R + 0,7152 × G + 0,0722 × B, com cada canal convertido antes da sRGB para luz linear. Essa conversão divide o valor por 12,92 quando ele é no máximo 0,04045 e, acima disso, usa ((valor + 0,055) / 1,055) ^ 2,4. O verde pesa mais porque o olho é mais sensível a ele. O WCAG 2.0 original trazia 0,03928 no lugar de 0,04045, e a diferença não muda nenhum resultado com canais de 8 bits.

A razão não é arredondada para cima: 4,499 não passa em 4,5. Quando o arredondamento em duas casas faria uma combinação reprovada aparecer com o valor do limiar, a página corta o número em vez de arredondar.

AA e AAA: o que cada nível exige

O WCAG tem dois níveis de contraste para texto. O AA, no critério 1.4.3, pede 4,5:1 em texto normal e 3:1 em texto grande, e é o nível mais usado como meta. O AAA, no critério 1.4.6, pede 7:1 e 4,5:1. Para componentes de interface e gráficos, o critério 1.4.11 pede 3:1 no AA e não tem versão AAA.

Nem toda cor precisa chegar ao AAA. O próprio W3C não recomenda exigir o AAA como regra geral de um site inteiro, porque há conteúdo que não consegue cumprir todos os critérios desse nível.

O que conta como texto grande

É o texto de pelo menos 18 pt, ou de pelo menos 14 pt em negrito. Em pixels CSS, a 96 dpi, são cerca de 24 px e 18,66 px. O limiar é menor porque letras grandes continuam legíveis com menos contraste. Na dúvida, trate o texto como normal: 4,5:1 serve para qualquer tamanho.

Contraste de componentes e ícones

O critério 1.4.11 pede 3:1 para as partes de um componente necessárias para reconhecê-lo, como a borda de um campo ou de um checkbox, e para gráficos que carregam informação, como ícones sem texto e as linhas de um gráfico. Vale também para os estados, como o anel de foco. O texto dentro do componente continua seguindo 4,5:1.

Erros comuns de contraste

Quatro casos para conferir antes de publicar:

• Placeholder em cinza claro. Ele é texto e precisa de 4,5:1 sobre o fundo do campo, mesmo que suma quando a pessoa digita.
• Texto sobre imagem. O contraste muda de ponto a ponto, então meça no pior trecho ou ponha uma camada sólida ou escurecida atrás do texto.
• Foco e estados sem contraste. O anel de foco, a borda do campo selecionado e o ícone ativo entram no critério 1.4.11 e precisam de 3:1.
• Componentes desabilitados. O WCAG dispensa componentes inativos do contraste mínimo, mas cinza demais deixa a pessoa sem saber o que está bloqueado. Logotipos também ficam fora da regra, e o texto em volta deles não.

Exigência legal no Brasil

A Lei Brasileira de Inclusão (Lei 13.146/2015, art. 63) exige acessibilidade nos sites de empresas com sede ou representação comercial no país e nos de órgãos do governo. A lei não cita números de contraste: ela manda seguir as boas práticas internacionais, e o WCAG é a referência dessas práticas.

Para os portais do governo federal, o Governo Digital: eMAG 3.1 traz as recomendações de acessibilidade, e a revisão de 2014 considerou o WCAG 2.0. Esta página não substitui uma auditoria de acessibilidade nem orientação jurídica.

Fontes

Conferidas em 6 de novembro de 2026:

• WCAG 2.2, critério 1.4.3: Contraste (mínimo)
• WCAG 2.2, critério 1.4.6: Contraste (melhorado)
• WCAG 2.2, critério 1.4.11: Contraste não textual
• WCAG 2.2: definição de luminância relativa
• Understanding WCAG 2.2: Contraste (mínimo)
• Governo Digital: eMAG 3.1
• Planalto: Lei 13.146/2015

Para ir além do contraste

Precisa do código de uma cor? Use o Seletor de cores, ou converta com o conversor de HEX para RGB e o conversor de RGB para HEX. Para ver o contraste do texto branco e do preto sobre cada uma das 148 cores do CSS, consulte a tabela de cores HTML.