Resposta rápida
O contraste de cor é a diferença de luminosidade entre duas cores colocadas lado a lado — na maioria das vezes, texto sobre o respetivo fundo. Mede-se como um rácio, de 1:1 (sem contraste) a 21:1 (preto puro sobre branco), e as WCAG definem rácios mínimos específicos, habitualmente 4.5:1 para texto normal no Nível AA, que o texto e os elementos de interface têm de cumprir para se manterem legíveis.
O que é o contraste de cor?
A diferença é expressa como um rácio, de 1:1 (contraste nenhum) a 21:1 (preto puro sobre branco puro). Um rácio mais elevado significa que as cores são mais fáceis de distinguir. Um rácio mais baixo significa que começam a confundir-se, sobretudo para quem tem acuidade visual reduzida.
Onde se aplica o contraste
O contraste não diz respeito apenas ao texto corrido. Abrange também ícones, contornos de campos de formulário, botões e qualquer outro elemento que precise de se destacar daquilo que está por trás.
Como se mede o contraste de cor
O rácio não se avalia a olho. É calculado a partir da luminância relativa de cada cor, um valor baseado nas suas componentes RGB. Esse valor aproxima o brilho com que a cor é percecionada pelo olho humano. Os dois valores de luminância entram numa fórmula normalizada, e o resultado é o rácio de contraste.
Verificar na prática
Ninguém faz estas contas à mão. Uma ferramenta de verificação de contraste recebe uma cor de primeiro plano e uma de fundo e devolve o rácio automaticamente. Indica também se esse rácio passa ou falha face ao limiar aplicável. O que vale a pena saber não é a fórmula — é qual o limiar que se aplica ao elemento que tem à frente.
Requisitos de contraste de cor nas WCAG
WCAG sets specific, testable thresholds. It doesn't just say "make text readable."
Requisitos do Nível AA
Nas WCAG 2.1 Nível AA, o texto normal precisa de um rácio de pelo menos 4.5:1. O texto grande — 18pt regular ou 14pt negrito e acima — precisa apenas de 3:1. Letras maiores mantêm-se legíveis com menos contraste, razão pela qual o limiar desce.
Contraste não textual
Uma regra separada abrange os elementos não textuais. Componentes de interface como contornos de botões e limites de campos de formulário precisam de 3:1. O mesmo se aplica a elementos gráficos que transportam significado, como os ícones.
Nível AAA e exceções
O Nível AAA eleva ainda mais a fasquia: 7:1 para texto normal e 4.5:1 para texto grande. A maioria das normas legais e de contratação pública remete para o AA, não para o AAA. Os elementos decorativos e os logótipos estão geralmente isentos, uma vez que não precisam de transmitir informação por si próprios.
Porque é que o contraste de cor é importante para a acessibilidade
Um contraste insuficiente não se limita a parecer desbotado. Torna o texto genuinamente ilegível para uma parte significativa dos visitantes.
Barreiras relacionadas com a visão
A baixa visão e certas formas de daltonismo reduzem a capacidade de distinguir tons subtilmente diferentes. Texto que parece correto a alguém com visão típica pode ser funcionalmente invisível para quem não a tem.
Barreiras situacionais
O reflexo no ecrã de um telemóvel sob luz solar direta, um monitor antigo com retroiluminação mais fraca ou um ecrã de baixa qualidade reduzem o contraste efetivo para qualquer leitor — colocando uma pessoa com visão plena na mesma situação de alguém com uma deficiência visual.
Porque é que as auditorias detetam isto primeiro
O contraste é um dos poucos requisitos de acessibilidade com um limiar numérico rígido, o que faz dele um dos pontos mais consistentemente verificados numa auditoria. Uma página pode reprovar só pelo contraste, mesmo quando tudo o resto está bem resolvido.
Contraste de cor no design vs. no desenvolvimento
O design e o desenvolvimento não competem por quem é dono do contraste de cor. São responsáveis por dois pontos distintos onde ele pode falhar, e ambos têm de se aguentar para que o produto final cumpra efetivamente o requisito.
O que cabe ao design
O design escolhe a paleta. A tarefa é selecionar uma combinação de primeiro plano e fundo que ultrapasse o rácio exigido, suficientemente cedo para que o sistema de cores não tenha de ser refeito mais tarde.
O que cabe ao desenvolvimento
O desenvolvimento determina se essa escolha sobrevive ao contacto com uma interface real. Um botão que cumpre 4.5:1 no estado predefinido pode ficar abaixo do limiar nos estados de hover, desativado ou de foco, se essas variantes não forem verificadas separadamente. Um token de cor que passa sobre um fundo sólido pode falhar sobre uma imagem ou um gradiente.
Porque tem de ser verificado duas vezes
Passar num verificador dentro do ficheiro de design não significa que o trabalho esteja feito. O contraste tem de ser confirmado de novo depois de a interface estar construída, ao longo dos seus estados interativos — e não apenas na maqueta estática.
Como verificar o contraste de cor
Verificações manuais
Comece por uma ferramenta dedicada de verificação de contraste: introduza uma cor de primeiro plano e uma de fundo e ela devolve o rácio, juntamente com uma indicação de aprovação ou reprovação face ao AA e ao AAA. Ferramentas de design como o Figma têm plugins que verificam o contraste diretamente numa maqueta. As ferramentas de programação do navegador costumam mostrar o rácio de contraste ao inspecionar um elemento de texto.
Verificações automatizadas
Os analisadores automáticos de acessibilidade conseguem verificar o contraste em escala, em todo um sítio web.
Onde a automatização fica aquém
Os analisadores só detetam aquilo que é programaticamente detetável. Texto incluído dentro de uma imagem, texto sobre uma imagem ou vídeo de fundo e conteúdo em componentes não convencionais podem escapar a uma análise e exigir, em vez disso, uma verificação manual.
Por essa razão, o contraste é habitualmente confirmado duas vezes: uma de forma automática em todo o sítio, e outra manualmente no punhado de componentes — banners de destaque, widgets personalizados, tudo o que tenha um fundo não sólido — onde a automatização é menos fiável.
