Rácios de Contraste WCAG Explicados: Um Guia Prático para Designers

Aqui está um número ao qual volto sempre: no relatório WebAIM Million de 2025, o texto de baixo contraste foi a falha de acessibilidade mais comum da web, presente em 79,1% das principais um milhão de páginas iniciais. Não foi texto alternativo em falta. Não foram botões sem etiqueta. Foi o contraste. O problema de acessibilidade mais detetado no mundo são duas cores demasiado parecidas, e quase todas as equipas que o lançam não fazem ideia de que o fizeram.

Eu próprio já lancei esse bug. Há anos construí um dashboard "premium" com um elegante texto cinzento #9CA3AF sobre branco, aprovado por toda a gente na sala porque parecia requintado num ecrã Retina novinho em folha, numa sala de reuniões às escuras. Uma semana depois chegou um ticket de suporte de um utilizador num comboio cheio de sol que literalmente não conseguia ler as etiquetas. O texto estava em cerca de 2,6:1. As WCAG pedem 4,5:1. Essa diferença é o assunto inteiro deste artigo.

O que é, de facto, um rácio de contraste WCAG

Um rácio de contraste WCAG é um único número que descreve quão diferentes são duas cores em luminosidade, expresso como um rácio de 1:1 a 21:1. Branco sobre branco é 1:1 (invisível). Preto puro sobre branco puro é 21:1 (o máximo). Tudo o que desenha vive algures no meio, e as WCAG definem o piso abaixo do qual não pode descer.

O crucial a interiorizar cedo: o contraste é sobre luminância, não sobre se as cores "parecem diferentes". O vermelho e o verde parecem extremamente diferentes para a maioria das pessoas, mas um vermelho saturado (#FF0000) sobre um verde saturado (#008000) situa-se em apenas cerca de 1,3:1 porque carregam quase a mesma luminosidade. Para uma pessoa com daltonismo vermelho-verde, ou para qualquer um que dê uma vista de olhos num ecrã de baixa qualidade, esse par é uma papa. O seu olho é enganado pelo tom; a fórmula de contraste não é.

A fórmula, em termos simples

O rácio é calculado como (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância da mais escura. Quase nunca vai calcular isto à mão, mas compreender as duas fases diz-lhe por que razão os seus instintos o enganam.

Primeiro, a luminância relativa de cada cor obtém-se pegando nos seus canais de vermelho, verde e azul, "linearizando-os" (desfazendo a curva gama que os ecrãs aplicam, usando a regra de que os canais iguais ou inferiores a 0.03928 são divididos por 12.92, e os mais altos passam por ((c + 0.055) / 1.055) ^ 2.4), e depois ponderando-os: 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul. Esses pesos não são arbitrários. Os olhos humanos são extraordinariamente sensíveis ao verde e quase cegos ao azul em comparação.

Esta é a conclusão mais útil de toda a matemática: o verde carrega cerca de dez vezes o brilho percebido do azul. É por isso que o texto azul puro sobre preto é doloroso e mal passa, enquanto a mesma "escuridão" de verde se lê bem. É por isso que as suas ligações azuis sobre um fundo escuro parecem fracas por mais saturadas que as torne. Se só se lembrar de uma coisa sobre a fórmula, lembre-se dos pesos.

O + 0.05 no rácio é uma constante que modela a luz ambiente a refletir-se no ecrã, de modo que mesmo pretos teoricamente perfeitos nunca produzem um rácio infinito. É a razão pela qual os rácios de contraste param em 21:1.

Os três limiares que tem de saber

As WCAG (as Diretrizes de Acessibilidade para Conteúdo Web, mantidas pelo W3C) definem um pequeno conjunto de números. Memorize estes e cobriu a grande maioria do trabalho real.

• 4,5:1 — o mínimo para texto de corpo normal no Nível AA. Este é o número de cavalo de batalha. Se visar um valor, vise este.
• 3:1 — o mínimo para texto grande no AA, e também o mínimo para elementos de UI e gráficos não textuais (mais sobre isto abaixo).
• 7:1 — texto normal no Nível AAA, o nível reforçado para utilizadores com baixa visão. O texto grande no AAA precisa de 4,5:1.

Repare no padrão: cada nível é mais ou menos o seguinte a subir. O grande-AA e o não textual partilham 3:1; o normal-AA e o grande-AAA partilham 4,5:1. É menos para decorar do que parece.

AA vs AAA: qual deve realmente?

O AA é a norma do mundo real. É o que o Ato Europeu de Acessibilidade, os acordos motivados pela ADA nos EUA, a Secção 508 e essencialmente todos os contratos de adjudicação referenciam. Quando um advogado ou auditor diz "em conformidade com as WCAG", refere-se ao AA. O AAA é o nível de ouro, e as próprias diretrizes dizem explicitamente que a conformidade AAA não é exigida como política geral para sites inteiros, em parte porque há conteúdo que simplesmente não consegue chegar a 7:1 sem parecer partido.

A minha opinião honesta após anos disto: desenhe o texto de corpo para ultrapassar o AA com conforto, e depois trate o AAA como um alvo que atinge para o conteúdo que mais importa — a coluna principal de leitura de um artigo, mensagens de erro, qualquer coisa que um utilizador stressado ou com baixa visão tenha de processar sob pressão. Perseguir os 7:1 em cada legenda e etiqueta desativada é uma batalha perdida que achata toda a sua paleta em preto-sobre-branco.

Texto normal vs texto grande — e a armadilha lá dentro

As WCAG aliviam o texto grande (3:1 em vez de 4,5:1) porque letras maiores e mais pesadas são legíveis com menos contraste. Mas a definição de "grande" é específica e as pessoas erram-na constantemente.

• Grande = 18pt para cima, ou seja 24px com peso normal.
• Ou 14pt para cima, ou seja cerca de 18,5px, se o texto for negrito.

A conversão que tramou toda a gente é 1pt = 1,333px, razão pela qual 18pt se torna 24px e 14pt se torna ~18,5px. Por isso um cabeçalho regular de 19px não é texto grande pela definição das WCAG — continua a dever os 4,5:1 completos. Uma etiqueta negrito de 16px também não é grande. Já vi designs "passarem" na cabeça de alguém porque o cabeçalho "parecia grande", quando em píxeis se situava mesmo abaixo do limiar e precisava do rácio mais exigente. Na dúvida, mantenha o corpo e os subtítulos em 4,5:1 e só reclame o alívio de 3:1 para tipografia de exibição genuinamente grande.

Contraste não textual: o critério que toda a gente esquece (1.4.11)

É aqui que a maioria das equipas, de resto cuidadosas, falha. As WCAG 2.1 acrescentaram o Critério de Sucesso 1.4.11, Contraste Não Textual, exigindo 3:1 para duas categorias que nada têm a ver com leitura:

• Componentes de interface de utilizador — o limite visual de um controlo que lhe diz que ele existe e em que estado está. O contorno de um campo de texto, o contorno de uma checkbox desmarcada, o anel de foco à volta de um botão, a calha de um toggle.
• Objetos gráficos — partes de ícones, gráficos e diagramas necessárias para os compreender. A linha de um sparkline, as fatias de um gráfico circular, a forma de um ícone de aviso.

A violação clássica: um campo de pesquisa que é apenas uma caixa #FFFFFF com um contorno de 1px cinzento-claro #E5E7EB numa página branca. Esse contorno está em cerca de 1,2:1. Utilizadores com visão mas baixa acuidade literalmente não conseguem encontrar onde clicar. O texto de placeholder pálido e os contornos de botões fantasma falham da mesma forma. A decoração pura está isenta, tal como o texto dentro do componente (esse vive sob o 1.4.3 em vez deste) — mas a coisa que sinaliza "isto é interativo" tem de chegar a 3:1 contra o que quer que esteja ao seu lado.

Como medi-lo — e como corrigi-lo

Não se avalia o contraste a olho. Mede-se. O meu fluxo de trabalho do dia a dia:

• No navegador, abra as DevTools e inspecione o elemento de texto. O Chrome e o Firefox imprimem ambos o rácio de contraste mesmo no seletor de cores, com marcas de visto para AA e AAA, e até desenham uma linha no espaço de cor a mostrar o limiar que pode arrastar.
• Para verificar um par de códigos hexadecimais antes de chegarem sequer ao código, use um verificador dedicado. O gerador de paleta de cores deste site inclui um verificador de contraste WCAG para que possa validar combinações ainda enquanto as está a escolher, em vez de descobrir o problema numa auditoria.
• Para varreduras de páginas inteiras, corra uma ferramenta automatizada. Mas conheça o seu limite: a automatização apanha texto sobre cor sólida e falha o texto que assenta sobre fotos, gradientes ou camadas semitransparentes. Esses, verifica-os à mão.

Quando algo falha, resista à tentação de mexer no tom. Mudar a saturação quase não move o contraste; mudar a luminosidade move-o muito. Em concreto:

• Escureça o primeiro plano ou clareie o fundo até ultrapassar a linha. O meu cinzento #9CA3AF de há pouco precisou de ir para cerca de #6B7280 sobre branco para chegar a ~4,5:1 — mesma família, apenas uns passos mais fundo.
• Para texto claro sobre cor, normalmente é mais rápido aprofundar o fundo. Uma etiqueta #FFFFFF num botão azul #60A5FA falha; baixe o botão para #2563EB e ultrapassa o AA sem tocar no texto.
• Para gráficos e ícones, acrescente um traço escuro fino ou uma subtil matiz de fundo em vez de lutar para escurecer cada preenchimento.

Os erros que vejo em equipas reais

• Aprovar num ecrã perfeito. Um MacBook impecável numa sala às escuras embeleza tudo. Os utilizadores reais têm encandeamento, painéis baratos, filtros de luz azul, e o "night shift" a aquecer os brancos. Desenhe para a pior condição de visualização plausível, não para a demonstração.
• Confiar no tom em vez da luminância. Duas cores vivas mas igualmente claras (aquele vermelho-sobre-verde outra vez) podem ser invisíveis para utilizadores daltónicos enquanto passam o seu teste de intuição. Faça as contas.
• Esquecer o texto de placeholder e os estados desativados. Os placeholders continuam a ser texto e continuam a dever contraste se transmitirem significado. Os controlos desativados estão genuinamente isentos, mas não abuse disso para esconder conteúdo ativo de baixo contraste por trás de um ar "desativado".
• Ignorar as sobreposições. Texto branco sobre uma foto de hero passa por cima do canto escuro e falha por cima do céu brilhante. Um scrim — uma camada escura semiopaca entre a imagem e o texto — é a solução padrão.
• Tratar 4,5:1 como meta em vez de piso. Aterrar exatamente em 4,5:1 é frágil; basta um designer ajustar uma tonalidade e parte-o de novo. Construa com folga.

Uma palavra sobre o futuro: as WCAG 3 estão a explorar um modelo percetual chamado APCA que julga o contraste mais como o olho humano, tendo em conta o tamanho e o peso do texto em conjunto em vez de um rácio fixo. É promissor e vale a pena seguir, mas, à data de hoje, os rácios deste artigo — apoiados pelo Understanding 1.4.3 do W3C — são o que o torna conforme do ponto de vista legal e prático. Construa para eles, deixe-se uma margem, e meça em vez de adivinhar. Os 79,1% de sites que falham falharam, na sua maioria, porque ninguém verificou. Verificar é o trabalho inteiro.