Contraste de cores: como cumprir os critérios 1.4.3 e 1.4.11 da WCAG

Na WCAG 2.2, nível AA, texto comum precisa de contraste de pelo menos 4,5:1 com o fundo (critério 1.4.3). Texto grande, que é a partir de 18 pontos, ou 14 pontos em negrito, precisa de 3:1. Componentes de interface, como bordas de campo e indicadores de foco, e partes de gráficos necessárias para entender o conteúdo precisam de 3:1 com as cores vizinhas (critério 1.4.11). O nível AAA (critério 1.4.6) sobe o texto para 7:1 e o texto grande para 4,5:1. Os valores não são arredondados: 4,48:1 não cumpre 4,5:1.

O texto segue a WCAG 2.2 na edição de dezembro de 2024 e os documentos "Understanding" do W3C, que explicam cada critério. As novidades da versão 2.2 estão no guia WCAG 2.2 nível AA.

Os três critérios de contraste

Os números vêm de pesquisa sobre visão. Segundo o Understanding 1.4.3, 3:1 é o mínimo recomendado por normas ISO e ANSI para leitores com visão normal. A WCAG multiplica por 1,5 para compensar a perda de sensibilidade ao contraste associada a acuidade visual de 20/40, e chega a 4,5:1.

O 1.4.6 é AAA e a WCAG não recomenda exigir AAA como regra para sites inteiros. Ele faz sentido como meta para textos longos de leitura, mas não é o nível que leis e normas costumam pedir.

O que conta como texto grande

A WCAG define texto em tamanho grande como texto com pelo menos 18 pontos, ou 14 pontos em negrito (WCAG 2.2, glossário). A NBR 17225 usa a mesma definição. Como a web mede em pixels CSS, a conversão é 1 pt = 1,333 px, segundo o Understanding 1.4.3:

Três detalhes da definição costumam passar batido:

• Vale o tamanho em que o conteúdo é entregue. O zoom que o usuário aplica depois não conta.

• Com unidades relativas (rem, em, %), o tamanho real é o que o navegador calcula. Confira o valor final em "Computed" no DevTools, não o valor escrito no CSS.

• A WCAG alerta que fontes de traço muito fino ou formas incomuns são mais difíceis de ler em contraste baixo. Uma fonte fina de 24 px passa no número, mas pode ser ruim de ler.

Como a razão de contraste é calculada

A razão de contraste compara a luminância relativa das duas cores, que é o brilho de uma cor numa escala de 0 (preto) a 1 (branco). As fórmulas estão no glossário da WCAG 2.2 (luminância relativa e razão de contraste), que por sua vez tira a luminância da norma sRGB (IEC 61966-2-1).

1. Divida cada canal da cor (R, G e B, de 0 a 255) por 255.

2. Converta cada canal para valor linear: se for menor ou igual a 0,04045, divida por 12,92; se for maior, calcule ((valor + 0,055) / 1,055) elevado a 2,4.

3. Calcule a luminância: L = 0,2126 × R + 0,7152 × G + 0,0722 × B, com os valores lineares.

4. Calcule a razão: (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância da cor mais clara e L2 a da mais escura.

Exemplo: texto #767676 sobre fundo #FFFFFF

#767676 → 118/255 = 0,4627 → ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812
Como R = G = B, L = 0,1812
Branco: L = 1

Razão = (1 + 0,05) / (0,1812 + 0,05) = 4,54 → cumpre 4,5:1

Texto #777777 sobre branco: 4,48 → não cumpre (não se arredonda)

O resultado vai de 1:1 (mesma cor) a 21:1 (preto sobre branco). Até maio de 2021, o limiar da fórmula na WCAG era 0,03928; hoje é 0,04045. O W3C diz que a troca não tem efeito prático nos cálculos.

Duas regras do glossário afetam a auditoria. Se o CSS define a cor do texto, mas não a do fundo, ou o contrário, isso já é falha, porque a cor padrão do usuário é desconhecida. E se nenhuma cor de fundo foi definida, considera-se branco.

Contraste do que não é texto (1.4.11)

O critério 1.4.11 pede 3:1 contra as cores vizinhas para duas coisas (WCAG 2.2, 1.4.11):

• Componentes de interface: o que é preciso ver para identificar um controle (botão, campo, caixa de seleção) e o estado dele (em foco, marcado, selecionado, expandido).

• Objetos gráficos: as partes de um gráfico ou ícone necessárias para entender o conteúdo, como as linhas de um gráfico ou um ícone de status sem texto.

O Understanding 1.4.11 esclarece pontos que geram dúvida:

• Um campo de texto não precisa ter borda. Mas, se a borda é a única pista visual de que ali existe um campo, ela precisa de 3:1 contra o fundo. Vale também para campos só com a linha de baixo.

• "Cores vizinhas" são as que ficam em volta do componente. Para um campo, conta o fundo da página ao redor, não o preenchimento interno.

• Num gráfico, linhas e fatias precisam de contraste, salvo quando rótulos e valores em texto já transmitem a mesma informação.

• O estilo de hover que o site acrescenta é complementar e não precisa ter 3:1. Ele não pode, porém, fazer o componente ou o indicador de foco perder contraste.

Exceções

Armadilhas comuns

Placeholder

O texto de exemplo dentro de um campo, o placeholder, é texto e precisa de 4,5:1, como diz o Understanding 1.4.3. O mesmo vale para texto que aparece ao passar o mouse ou ao receber foco, como tooltips. Usar placeholder no lugar de rótulo é outro problema, tratado no guia de formulários acessíveis.

Texto sobre imagem ou gradiente

Usar imagem de fundo que não dá contraste suficiente com o texto é uma falha documentada pelo W3C (F83). Numa imagem ou num gradiente, o contraste muda de ponto a ponto. Recomendação: meça no trecho em que o fundo mais se aproxima da cor do texto, e não numa média. As correções mais simples são uma camada escura ou clara semitransparente entre a imagem e o texto, ou uma caixa de fundo sólido atrás do texto. Lembre que o recorte da imagem muda entre celular e desktop, e cada variação precisa cumprir.

Indicador de foco

O critério 2.4.7 (AA) pede que o foco do teclado seja visível. O Understanding 1.4.11 acrescenta que, se o site muda o estilo do foco, o indicador precisa ter 3:1 contra o fundo adjacente. Um contorno azul-claro sobre fundo branco, ou um outline: none trocado por uma sombra quase invisível, costuma falhar. A NBR 17225 é mais explícita: o item 5.11.6, um requisito, pede contraste de pelo menos 3:1 do indicador de foco com o fundo e entre os estados com e sem foco.

Estados que dependem só de cor

Um botão de alternância que muda de cinza para verde quando ligado, ou uma aba selecionada que só muda de tom, precisa que essa diferença de estado tenha 3:1. Se não tiver, acrescente outra pista, como um ícone, um sublinhado ou texto.

Cinza "elegante"

Texto secundário em cinza claro (datas, legendas, rodapé, preços antigos) é onde mais aparece contraste insuficiente. Use o cálculo acima: sobre branco, #767676 é o cinza mais claro que ainda passa em texto comum.

Como testar

1. Rode uma ferramenta automática para achar os casos óbvios. No Chrome, o painel CSS Overview lista problemas de contraste na seção de cores, e o relatório de acessibilidade do Lighthouse também verifica contraste (Chrome DevTools).

2. Inspecione textos suspeitos: no seletor de cores do DevTools, a seção "Contrast ratio" mostra a razão e se ela atinge AA ou AAA.

3. Para texto sobre imagem, use o conta-gotas no ponto do fundo mais próximo da cor do texto e calcule a razão com essas duas cores.

4. Teste os estados: passe o mouse, dê foco com Tab, marque caixas, abra menus. Confira o texto que aparece e o contraste do indicador de cada estado.

5. Verifique o 1.4.11 à mão: bordas de campos, ícones sem texto, gráficos e o indicador de foco.

6. Repita no celular e, se o site tiver, no tema escuro.

Ferramentas automáticas ajudam, mas o W3C avisa que elas não determinam sozinhas se um site é acessível (Selecting Web Accessibility Evaluation Tools). Contraste em estados, sobre imagens e em elementos não textuais pede revisão humana. A correção do contraste fica no CSS do site; um widget instalado por cima não muda o código (veja overlay de acessibilidade resolve a lei?).

Contraste na NBR 17225

A ABNT NBR 17225:2025 traz o contraste na seção 5.11, "Uso de cores" (ABNT NBR 17225:2025):

Para saber quem está obrigado pela Lei Brasileira de Inclusão e qual o papel da norma, veja o guia LBI e NBR 17225: o que a lei exige de um site. Este texto explica a norma técnica; não é parecer jurídico.

Como verificar o seu site

A checagem grátis do WebVyze analisa a página inicial, sem cadastro, e aponta riscos de acessibilidade ligados à lei, entre eles problemas de contraste que dá para detectar automaticamente. Os casos que pedem olho humano, como texto sobre imagem, estados de hover e foco, ícones e gráficos, continuam exigindo os testes manuais descritos acima.