O WCAG opera com um sistema de conformidade em três níveis: A, AA e AAA. A maioria dos designers já ouviu falar do AA. Poucos entendem de onde vêm essas letras, o que separa um nível do outro, e por que essa distinção importa para decisões tomadas todo dia em qualquer ferramenta de design.

Contraste é uma das seis falhas de acessibilidade mais comuns da web, coberta em detalhes em Falhas de acessibilidade são decisões de design. A prova está aqui. Este artigo aprofunda o que os níveis significam, como a proporção funciona, e onde cada limite se aplica em um produto real.

01

De onde vêm os níveis

1.1 A origem do A, AA e AAA

As Web Content Accessibility Guidelines foram publicadas pela primeira vez pelo W3C em maio de 1999. Desde o início, o grupo de trabalho reconheceu que um padrão binário de aprovado/reprovado não cobriria toda a variedade de conteúdo digital, necessidades de usuário e restrições de produção. Um sistema de três níveis foi a solução.

As letras são níveis de conformidade: A é o mínimo, AA é o padrão intermediário aceito globalmente como referência legal, e AAA é o nível mais alto alcançável. Cada nível é cumulativo: atingir AA exige satisfazer todos os critérios de Nível A e Nível AA, e AAA exige satisfazer tudo nos três níveis.

O próprio W3C não recomenda o AAA como política geral para sites inteiros, porque alguns tipos de conteúdo não conseguem satisfazer todos os critérios AAA por natureza. Cores semânticas saturadas são um exemplo concreto, abordado na seção 3.2.

A realidade legal. Conformidade com acessibilidade tem peso legal em mais jurisdições do que a maioria das equipes percebe. Nos Estados Unidos, a ADA cobre sites do setor privado desde uma decisão do DOJ em 2022, com o WCAG 2.1 Nível AA como referência consistente. A Section 508 se aplica a todas as agências federais. Vários estados americanos individuais promulgaram legislação própria com exigências mais rígidas ou explícitas, Califórnia e Nova York entre eles. Na Europa, o European Accessibility Act tornou obrigatória a conformidade com WCAG 2.2 Nível AA para produtos e serviços digitais privados a partir de junho de 2025. "Meu produto não precisa ser acessível" deixou de ser uma posição legalmente defensável na maioria dos mercados comerciais.

1.2 O que cada nível exige para contraste

O WCAG 2.2 define os requisitos de contraste da seguinte forma:

Nível AA

  • Texto normal: proporção mínima de contraste de 4,5:1 contra o fundo
  • Texto grande (18pt regular ou 14pt negrito e acima): mínimo de 3:1
  • Componentes de interface e elementos gráficos que transmitem significado: mínimo de 3:1

Nível AAA

  • Texto normal: mínimo de 7:1
  • Texto grande: mínimo de 4,5:1
  • O limite de 7:1 foi calibrado para usuários com aproximadamente 20/80 de visão, que conseguem perceber conteúdo nessa proporção sem tecnologia assistiva de melhoria de contraste. Abaixo de 7:1, parte desse grupo de usuários depende de zoom do navegador, configurações de contraste do sistema operacional, ou ferramentas de terceiros para ler o mesmo conteúdo.
3:1 4,5:1 7:1
1:1 21:1

Salvar alterações

2,85:1 · falha

Salvar alterações

4,54:1 · AA

Salvar alterações

7,0:1 · AAA

A escala de contraste do WCAG, de 1:1 a 21:1. Mesmo fundo branco em todos, só o cinza fica mais escuro.

02

Como a proporção é calculada

2.1 Luminância, não matiz

A proporção de contraste mede a diferença de luminância entre duas cores. Luminância é o brilho relativo de uma cor conforme percebido pelo olho humano, normalizado de 0 (preto puro) a 1 (branco puro).

A fórmula, conforme definida pelo W3C:

Proporção de contraste = (L1 + 0,05) / (L2 + 0,05)

L1 é a luminância relativa da cor mais clara, L2 a mais escura. A escala vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco).

Um equívoco comum: duas cores que parecem distintas por causa do matiz ainda podem falhar em contraste porque seus valores de luminância são próximos. Vermelho vivo e verde vivo são um caso clássico: parecem muito diferentes, mas ambos ficam numa faixa de luminância média, o que produz uma proporção baixa entre si e contra muitos fundos neutros.

2.2 Por que só o código hexadecimal não basta

Valores RGB no espaço de cor sRGB são codificados com gamma. Um valor de 128 numa escala de 0 a 255 não representa metade do brilho de 255. Os valores precisam ser linearizados antes de calcular a luminância. Depois da linearização, a fórmula pondera os três canais de forma diferente:

L = 0,2126 × R + 0,7152 × G + 0,0722 × B

O verde carrega o peso mais alto porque o olho humano percebe comprimentos de onda verdes como mais brilhantes que vermelho ou azul na mesma intensidade. Um verde vibrante e um azul vibrante que parecem igualmente saturados podem produzir proporções de contraste completamente diferentes contra o mesmo fundo.

2.3 Verificando contraste sem plugin

Antes de existirem verificadores de contraste dentro das ferramentas de design, uma solução prática era tirar um screenshot do design, abrir no Photoshop e dessaturar a imagem. A dessaturação remove o matiz e deixa só a luminância visível. Pares de baixo contraste aparecem como cinzas quase idênticos. Impreciso, mas eficaz o suficiente para pegar falhas óbvias antes de a especificação chegar à engenharia.

Hoje, duas opções não exigem nada instalado:

O Chrome DevTools tem um indicador de proporção de contraste dentro do seletor de cores. Inspecione qualquer elemento de texto, clique na amostra de cor nos estilos computados, e a proporção aparece com marcadores de aprovado/reprovado para AA e AAA. Funciona em qualquer página ao vivo.

O WebAIM Contrast Checker, em webaim.org/resources/contrastchecker, recebe dois valores hexadecimais e retorna a proporção imediatamente. Sem necessidade de conta.

Chrome DevTools

#767676
Proporção de contraste: 4,54
Aprova AA Falha AAA

WebAIM Contrast Checker

Primeiro plano#767676
Fundo#FFFFFF
4,54:1
Aprova AA Falha AAA

Mesmo par, duas ferramentas, mesma resposta: #767676 sobre branco passa no AA e falha no AAA.

03

Onde cada limite se aplica na prática

3.1 A hierarquia por consequência

Textos diferentes numa interface carregam consequências diferentes quando o contraste falha. Uma legenda decorativa e uma mensagem de erro podem falhar na mesma proporção. A auditoria parece idêntica. O impacto no usuário é completamente diferente.

Uma hierarquia prática de onde o AAA é o mínimo aceitável:

Mensagens de feedback. Estados de erro, mensagens de validação, confirmações de sucesso, avisos. Se um usuário envia um formulário incorretamente e não consegue ler o erro porque o texto está em 3,1:1, ele não tem nenhuma informação sobre o que deu errado. Tenta de novo, falha de novo, e sai. Esse é o momento em que a interface mais precisa se comunicar com clareza com alguém que já está confuso. AAA, sem exceção.

No contexto de um design system, tokens como foreground-on-state-strong e foreground-on-state-subtle deveriam ser definidos contra seus fundos pretendidos em AAA desde o início. Se o vermelho de erro atinge 4,5:1 como fundo, o token de primeiro plano em cima precisa compensar. Texto branco sobre vermelho escuro costuma atingir AAA onde o inverso não atinge. A decisão acontece no nível do token: se o token está errado, todo componente que o referencia é lançado com a mesma falha.

Ações disponíveis. O rótulo de qualquer elemento interativo que o usuário pode ativar no momento. AAA.

Rótulos de formulário. O que um campo está pedindo. Um rótulo que falha em contraste desaparece para usuários com baixa visão exatamente no momento em que precisam saber o que digitar. AAA.

Títulos e corpo de texto. A superfície de leitura principal. Mire AAA como padrão. A perda de conforto de leitura abaixo de 7:1 é mensurável para usuários com baixa visão, para usuários mais velhos cuja sensibilidade a contraste diminui com a idade, e para qualquer pessoa numa tela de baixa qualidade ou sob luz ambiente forte.

Texto secundário e decorativo. Legendas, timestamps, metadados que complementam em vez de substituir outra informação. AA é aceitável com bom senso.

3.2 Onde o AAA esbarra em limites físicos reais

Certas cores saturadas ficam numa faixa de luminância que torna 7:1 matematicamente inalcançável sem mudar fundamentalmente a cor. Um vermelho a 7:1 contra branco vira bordô escuro. Um amarelo a 7:1 contra branco vira oliva escuro. A cor perde a função comunicativa pela qual foi escolhida.

Um vermelho de erro forte, em muitas configurações de rampa de design system, vai falhar no AAA como fundo com texto branco em cima. Ajustar o token de primeiro plano recupera contraste em algumas configurações, mas a restrição física é real em outras.

A resposta correta: documentar a exceção explicitamente. Este token atinge AA neste contexto por este motivo. Uma exceção não documentada se propaga silenciosamente por todo componente que a referencia. Uma exceção documentada é uma decisão de design.

Na prática, um design system construído com contraste como preocupação de primeira classe atinge AAA em aproximadamente 70 a 80% dos contextos de texto. O percentual restante envolve cores semânticas saturadas, com exceções deliberadas e registradas.

04

Dados críticos além de valores financeiros

4.1 Um exemplo real da Instivo

Qualquer dado que habilita uma decisão com consequências reais exige o mesmo tratamento de contraste que dados financeiros.

Durante o trabalho na Instivo, uma plataforma enterprise de governança de varejo, o dashboard do produto exibia dados operacionais de estoque em cards: produtos com excesso de estoque, produtos com estoque baixo, e produtos já esgotados. Três estados, três cores, e uma consequência operacional imediata se algum fosse mal interpretado.

O usuário nesse dashboard é um comprador ou gerente de armazém tomando decisões de compra sob pressão de tempo. Um alerta crítico perdido porque o rótulo de esgotado renderizou a 3,2:1 significa um pedido não feito e uma prateleira que continua vazia. AAA era o requisito, não porque os números fossem monetários, mas porque interpretar mal tinha custo operacional direto.

Só borda de cor, contraste baixo

Excesso de estoque

SKU 40213

2,6:1 · falha

Estoque baixo

SKU 18820

2,9:1 · falha

Esgotado

SKU 55107

3,2:1 · falha

Ícone, rótulo e contraste AAA

Excesso de estoque

SKU 40213

7,2:1 · AAA

Estoque baixo

SKU 18820

7,4:1 · AAA

Esgotado

SKU 55107

7,1:1 · AAA

Os mesmos três estados de estoque. Só cor versus cor, ícone, rótulo e texto AAA juntos.

4.2 Outros contextos onde a mesma lógica se aplica

Dosagem de medicamento em interfaces de saúde, indicadores de prazo em ferramentas de gestão de projeto, dados de capacidade em sistemas de logística, status de bateria ou conexão em fluxos dependentes de dispositivo, contagem de erros e níveis de severidade em dashboards de monitoramento.

A pergunta que determina tudo: o que acontece operacionalmente se o usuário interpretar errado.

05

O usuário que nunca reclama

5.1 Por que falhas de contraste continuam invisíveis nos dados do produto

Usuários não abrem chamados de suporte por causa de contraste. Sentem atrito, ficam confusos, e fecham a aba. O produto não aprende nada.

De acordo com o relatório WebAIM Million de 2025, falhas de contraste aparecem em 79,1% das homepages analisadas, um número quase constante desde 2019. Como coberto em Falhas de acessibilidade são decisões de design, essas falhas são decisões de design tomadas antes de o código existir. Não produzem crash, nem 404, nem entrada de log. Só uma sessão que terminou mais cedo do que deveria.

Falhas de contraste não vão aparecer no feedback do usuário antes de serem grandes o suficiente para aparecer nas métricas de retenção. Nesse ponto o dano já está distribuído por milhares de sessões. Teste antes de lançar.

5.2 O estado do botão desabilitado

Stakeholders veem produtos em condições controladas: demos, walkthroughs, sessões de revisão onde alguém guia o fluxo. Veem o caminho feliz. Botões habilitados, formulários completos.

O estado de botão desabilitado aparece quando o usuário ainda não fez o que a interface exige: antes de uma data ser selecionada num fluxo de reserva, antes de campos obrigatórios serem preenchidos num formulário de várias etapas, antes de dados do cartão serem inseridos no checkout. Visível para o usuário que está travado. Invisível para o stakeholder numa demo.

A abordagem padrão é reduzir a opacidade. Diminui a opacidade, o botão parece inativo. Reduzir a opacidade também reduz o contraste proporcionalmente. Um rótulo de botão que passa no AA em opacidade total pode cair para 2:1 a 40% de opacidade. O usuário com baixa visão não consegue ler o que o botão diz. Recebe uma única informação (algo está indisponível) sem nenhum contexto sobre o que é ou como ativar.

O WCAG 2.2 inclui uma isenção de contraste para estados desabilitados, porque elementos desabilitados são intencionalmente desenfatizados. Essa isenção cria flexibilidade. Usar essa flexibilidade para remover a legibilidade do rótulo tira informação exatamente dos usuários que mais precisam dela.

Correção: manter contraste legível no rótulo do botão independente do que a superfície faz. Adicionar um tooltip ou texto de apoio em fluxos de várias etapas. Deixar a superfície comunicar inatividade. Deixar o rótulo comunicar a ação e o que ela exige.

≈2:1 a 40% de opacidade

Selecione uma data para continuar.

7,1:1 no rótulo · AAA

Mesmo estado desabilitado. Um remove a legibilidade do rótulo, o outro mantém legível e adiciona o contexto que faltava.

Fontes