Como Verificar o Contraste de Cores para Acessibilidade

Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres tem alguma forma de deficiencia de visao de cor. Milhoes a mais tem baixa visao, olhos envelhecidos ou estao visualizando telas sob luz solar brilhante. Se seu texto nao tem contraste suficiente contra seu fundo, essas pessoas nao podem le-lo. Contraste de cor nao e apenas algo bom de ter, e um requisito basico de acessibilidade. Um verificador de contraste baseado em navegador lida com todo o trabalho localmente sem enviar nenhuma cor ou dados para um servidor.

O que WCAG exige

As Diretrizes de Acessibilidade de Conteudo Web (WCAG) definem proporcoes minimas de contraste entre texto e seu fundo:

«Texto grande» significa 18px em negrito ou 24px regular ou maior. A proporcao de contraste varia de 1:1 (sem contraste, branco sobre branco) a 21:1 (contraste maximo, preto sobre branco).

Como verificar o contraste

1. Selecione suas cores: insira as cores de primeiro plano (texto) e fundo usando codigos HEX, valores RGB ou seletores de cor.
2. Verifique os resultados: a ferramenta mostra instantaneamente a proporcao de contraste e se sua combinacao passa em WCAG AA e AAA para texto normal e grande.
3. Ajuste se necessario: se o contraste falhar, escureca o texto ou clareie o fundo (ou vice-versa) ate passar no nivel necessario.

Uma breve historia dos padroes de contraste de cor

Antes do WCAG, a acessibilidade web era uma colcha de retalhos de regras especificas de fornecedores. O W3C publicou o WCAG 1.0 em 1999, com orientacao de contraste mas sem proporcao especifica. WCAG 2.0 (2008) introduziu a formula 4,5:1 / 7:1 baseada na ciencia das cores da Dra. Lillian Yetenekian e do laboratorio de pesquisa da IBM, com a contribuicao de pesquisadores de baixa visao. A formula foi projetada para que uma pessoa com visao 20/40 (baixa visao leve) possa ler texto em conformidade com AA, e uma pessoa com visao 20/80 (baixa visao significativa) possa ler texto em conformidade com AAA.

WCAG 2.1 (2018) adicionou requisitos de contraste para componentes de UI (3:1 para nao-texto), objetos graficos e indicadores de foco. WCAG 2.2 (2023) adicionou mais requisitos em torno de tamanhos de alvo e visibilidade de foco.

O rascunho de trabalho atual do WCAG 3.0 propoe uma nova formula de contraste (APCA, Accessible Perceptual Contrast Algorithm) que se ajusta melhor a percepcao humana, especialmente para texto mais escuro. APCA ainda nao e uma recomendacao do W3C, mas ja e suportada por algumas ferramentas como previa.

A adocao legal do WCAG tem sido constante:

• EUA: Secao 508 da Lei de Reabilitacao (federal) e jurisprudencia ADA exigem WCAG 2.0 / 2.1 AA
• UE: Diretiva de Acessibilidade Web (2016/2102) e Lei Europeia de Acessibilidade (2025) exigem EN 301 549, que e WCAG 2.1 AA
• Reino Unido: Public Sector Bodies Accessibility Regulations exige WCAG 2.1 AA
• Canada: ACA (Accessible Canada Act) para o setor federal, AODA (Ontario) para empresas
• Australia: a jurisprudencia DDA trata WCAG 2.1 AA como padrao
• Japao: JIS X 8341-3:2016 (baseado em WCAG 2.0)

Para a maioria dos sites publicos, WCAG 2.1 AA e o minimo legal de fato.

Como a proporcao de contraste e calculada

A proporcao de contraste e calculada usando a luminancia relativa de cada cor:

1. Converter cada cor de sRGB para RGB linear (correcao gamma)
2. Calcular luminancia relativa: L = 0,2126 R + 0,7152 G + 0,0722 B
3. Contraste = (L_mais_claro + 0,05) / (L_mais_escuro + 0,05)

O resultado e um numero de 1 (sem contraste) a 21 (contraste maximo). Os deslocamentos de 0,05 impedem a divisao por zero e modelam levemente a contribuicao da luz ambiente para o contraste percebido.

A formula foi deliberadamente projetada para ser deterministica e computavel, de modo que as mesmas cores sempre produzam a mesma proporcao. Ela nao leva em conta:

• Daltonismo: um par vermelho/verde pode ter uma proporcao de 7:1 mas ser invisivel para uma pessoa com daltonismo vermelho/verde
• Peso de fonte alem do negrito: fontes ultra finas ou em fio precisam de mais contraste
• Artefatos de anti-aliasing: tracos muito finos podem parecer mais claros do que o valor da cor sugere
• Padroes de fundo: gradientes, imagens ou ruido atras do texto degradam o contraste efetivo

E por isso que as verificacoes WCAG sao necessarias mas nao suficientes. A revisao visual com usuarios diversos (incluindo aqueles com daltonismo) captura o restante.

Erros de contraste comuns

Texto cinza claro em branco: #999999 em #ffffff tem uma proporcao de apenas 2,8:1. Isso falha em WCAG AA. Pode parecer «limpo» para um designer com visao perfeita, mas e ilegivel para muitas pessoas.

Texto colorido em fundos coloridos: um botao azul com texto branco frequentemente passa, mas um botao verde com texto branco pode nao passar. Sempre verifique, voce nao pode julgar a proporcao de contraste a olho.

Texto de placeholder: os placeholders de campo de formulario sao notoriamente de baixo contraste. Embora o WCAG nao exija estritamente que os placeholders atendam as proporcoes de contraste, os usuarios ainda precisam le-los.

Modo escuro: os designers frequentemente usam texto cinza medio em fundos cinza escuros para uma aparencia «sutil». Isso frequentemente falha nas verificacoes de contraste.

Texto sobre imagens: o texto colocado sobre uma imagem heroi frequentemente passa quando a imagem e escura e falha quando a imagem e clara. Use uma sobreposicao de gradiente escuro/claro ou um fundo solido atras do texto sobre imagens.

Mudancas de cor de marca: a identidade corporativa frequentemente dita uma cor primaria de marca. Se essa cor falhar como texto do corpo, use-a para titulos (texto grande, limite 3:1) e use um tom mais escuro para o corpo.

Cores de link: links devem ser distinguiveis do texto circundante. WCAG exige uma proporcao de 3:1 entre link e texto do corpo, mais outra pista visual (sublinhado, negrito ou icone).

Indicadores de foco: o contorno em torno de um botao ou link focado deve atender 3:1 de contraste contra seu fundo. Os aneis de foco padrao do navegador sao geralmente seguros; estilos de foco personalizados frequentemente falham.

Armadilhas comuns

• Testar apenas titulos: o contraste deve ser verificado para cada combinacao de tamanho e peso de texto na pagina. Texto do corpo, legendas, etiquetas, botoes, icones e campos de formulario todos precisam de verificacao.
• Esquecer estados de hover e ativos: um link que passa o contraste como padrao pode falhar quando ao passar o mouse (cor mais clara) ou ativo (fundo diferente). Verifique todos os estados.
• Estados desativados ignorados: WCAG exclui explicitamente estados desativados dos requisitos de contraste, mas o design acessivel ainda visa alguma distincao visivel.
• Sobreposicoes translucidas: o texto em uma sobreposicao escura transparente a 50% se comporta como sua cor efetiva, nao a cor de entrada. Componha a cor efetiva antes de verificar.
• Texto fino com anti-aliasing: 12px Inter Thin em 8,5:1 ainda e dificil de ler. Verifique com a fonte renderizada real, nao apenas o valor da cor.
• Deriva de conversao HSL: ajustar cores no espaco HSL pode produzir valores que parecem similares mas falham no contraste. Sempre verifique novamente apos ajustes de cor.
• Cores de marca bloqueadas por partes interessadas: quando uma cor de marca nao pode ser alterada, use-a estrategicamente (somente texto grande) e escolha uma cor diferente para o corpo. Documente a razao para as partes interessadas.
• Esquecer contraste de impressao: um site pode passar o contraste na tela mas falhar quando impresso em escala de cinza. Teste a saida impressa para documentos destinados a impressao.
• Texto em video: os fundos de video mudam constantemente. Ou fixe um quadro estatico, adicione uma sobreposicao de gradiente ou use um fundo solido.
• A internacionalizacao muda a densidade de caracteres: caracteres chineses, japoneses e coreanos sao mais densos que latinos. Uma proporcao de 4,5:1 que se le bem em ingles pode forcar leitores de idiomas CJK no mesmo tamanho. Aumente para 7:1 para texto internacional.

Alem do WCAG: APCA e contraste perceptual moderno

O Algoritmo Acessivel de Contraste Perceptual (APCA) e uma formula mais nova proposta por Andrew Somers para WCAG 3.0. Ao contrario da formula WCAG 2, APCA:

• Considera o peso e tamanho da fonte na pontuacao de contraste: fontes mais finas ou menores precisam de mais contraste
• Usa escala perceptual nao linear: corresponde a como a visao humana realmente responde a luminancia
• Lida melhor com fundos escuros: WCAG 2 sobrevaloriza o contraste em fundos escuros; APCA corrige isso
• Produz uma pontuacao consciente de polaridade: positiva para texto escuro em fundo claro, negativa para o contrario

As pontuacoes APCA variam aproximadamente de -108 a +108. Uma pontuacao de 60 (positiva ou negativa) e aproximadamente equivalente a 4,5:1 do WCAG 2. APCA ainda nao e legalmente exigido em lugar nenhum, mas esta sendo adotado por sistemas de design como Material Design e IBM Carbon como um padrao olhando para o futuro.

Para a maioria dos propositos praticos hoje, WCAG 2.1 AA (4,5:1 / 3:1) permanece o padrao legal e da industria. Algumas equipes usam APCA em paralelo como verificacao de qualidade.

Ferramentas e integracoes

Integre pelo menos uma ferramenta automatizada em CI para que falhas de contraste nao possam ser enviadas sem serem detectadas.

Dicas

• Verifique cada combinacao de texto/fundo: nao assuma. Mesmo designers experientes ficam surpresos com quais combinacoes falham.
• Teste ambos os temas: se seu site tem modos claro e escuro, verifique o contraste em ambos. Uma cor que funciona em branco pode falhar em cinza escuro.
• Use suas cores de marca sabiamente: se seu azul de marca falha como cor de texto, use-o para elementos maiores (botoes, cabecalhos) onde se aplica o limite de texto grande (3:1), e use um tom mais escuro para texto do corpo.
• Nao confie apenas em cor: alem de contraste suficiente, nunca transmita informacao apenas por cor. Use icones, etiquetas de texto ou padroes ao lado da cor para garantir que todos possam entender o conteudo.
• Teste com simuladores: um simulador de daltonismo mostra como seu design parece para usuarios com protanopia, deuteranopia ou tritanopia. Pares comuns (vermelho/verde) frequentemente falham.
• Teste sob luz solar: leve seu telefone para fora em um dia brilhante. Texto que mal passa WCAG pode se tornar ilegivel sob luz solar direta. Contraste AAA (7:1) e o minimo pratico para visibilidade externa.
• Salve paletas de cores acessiveis: construa uma paleta onde cada cor de texto passa contra cada cor de fundo. Restricao na frente, sem surpresas de contraste depois.
• Eduque as partes interessadas: partes interessadas que exigem uma cor de marca de baixo contraste frequentemente mudam de ideia quando mostrado o design atraves de um simulador de baixa visao.

Privacidade e dados de design

O verificador de contraste de cor roda inteiramente no seu navegador. As cores e valores que voce insere, os calculos e os resultados de contraste ficam todos no seu dispositivo. Nada e enviado para um servidor, registrado ou compartilhado com ninguem.

Isso importa menos para cores individuais (elas nao sao secretas) e mais para verificacao em lote ou trabalho de sistema de design onde voce pode colar uma paleta de marca completa, cores internas de mockup de produto, ou especificacoes de UI de produto nao lancadas. Ferramentas de contraste em nuvem registram cada colagem em seus logs de requisicao, as vezes os retem para «melhoria do servico», e poderiam vazar cores de marca nao lancadas ou designs UI. Um verificador baseado em navegador tem exposicao zero: as cores nunca saem da sua maquina.

A verificacao de contraste baseada em navegador tambem funciona offline depois que a pagina e carregada, util para revisoes de design em avioes, em ambientes seguros sem acesso a internet, ou em qualquer lugar onde voce nao pode ou nao deveria compartilhar dados de design com um servico de terceiros.