O que é a Calculadora de Contraste WCAG?
Esta ferramenta calcula a razão de contraste entre duas cores (fundo e texto) e indica se a combinação atende às diretrizes WCAG 2.1 (Web Content Accessibility Guidelines). A razão é calculada com base na luminância relativa de cada cor, conforme definido pelo W3C.
Onde e por que usar?
Acessibilidade digital não é opcional: a legislação de vários países (incluindo o Brasil, pela LBI) exige que sites sejam acessíveis a pessoas com deficiência visual. Designers de UI, desenvolvedores front-end e times de marketing devem verificar o contraste de cada combinação de cor antes de colocar um layout em produção. Nível AA (mínimo recomendado) exige 4,5:1 para texto normal e 3:1 para texto grande. Nível AAA (excelência) exige 7:1 e 4,5:1 respectivamente.
Como funciona?
Selecione a cor de fundo e a cor do texto usando os seletores ou digitando o código HEX. A razão de contraste é calculada em tempo real e exibida junto com quatro badges indicando aprovação ou reprovação em cada critério WCAG. Use as badges para guiar suas decisões de design.
Quando usar e quando não usar
O momento certo é antes de fechar a arte: preço sobre faixa colorida, texto do botão de compra, regulamento em letra miúda no rodapé do encarte. Também vale para revisar o guia de marca, testando de uma vez cada par de cores permitido, e para ter um número objetivo quando a discussão sobre legibilidade vira gosto pessoal.
A ferramenta compara duas cores sólidas. Não serve para texto sobre foto, degradê ou fundo com transparência; nesses casos, meça o ponto mais claro e o mais escuro atrás das letras e use o pior resultado. Logotipos e nomes de marca estão fora da exigência de contraste da WCAG, então não reprove um logo com base nesse número. E nenhum cálculo substitui testar a peça com pessoas, na tela e no ambiente em que ela vai ser vista.
Exemplo: combinações clássicas de encarte
Resultados da calculadora para pares comuns em material de varejo:
- Amarelo
#FFD700sobre branco: 1,40:1. Reprova nos quatro critérios. - Amarelo
#FFD700sobre vermelho#D00000: 4,07:1. Passa só em AA para texto grande. Serve para o preço em destaque e reprova para a descrição do produto. - Branco sobre vermelho
#E30613: 4,88:1. Passa em AA para texto normal, com pouca margem, e reprova em AAA. - Cinza
#767676sobre branco: 4,54:1. É o cinza mais claro que ainda passa em AA para texto normal sobre fundo branco. - Quase preto
#111111sobre amarelo#FFDD00: 14,02:1. Passa em tudo.
O segundo par explica boa parte das reclamações sobre encarte: a combinação é forte o bastante para um preço de 60 pixels e fraca demais para o texto de 12 pixels logo abaixo, desenhado com as mesmas cores.
Como a razão é calculada
O cálculo segue a definição de luminância relativa da WCAG 2. Cada canal de cor (vermelho, verde e azul) é dividido por 255 e convertido para escala linear: valores até 0,04045 são divididos por 12,92, e os demais passam por ((c + 0,055) / 1,055) elevado a 2,4. A luminância é a soma ponderada 0,2126 × R + 0,7152 × G + 0,0722 × B, com o verde pesando mais porque o olho humano é mais sensível a ele. A razão é (Lclara + 0,05) / (Lescura + 0,05) e vai de 1:1, sem contraste, a 21:1, preto sobre branco.
A ordem das cores não importa, porque a fórmula sempre divide a mais clara pela mais escura. O texto da WCAG cita 0,03928 como limite da primeira faixa em vez de 0,04045; para cores de 8 bits por canal, as duas versões dão o mesmo resultado. A razão exibida é arredondada em duas casas, mas a aprovação usa o valor sem arredondar: um par de 4,496 aparece como 4.50:1 e ainda assim reprova em AA.
Limitações
- O campo aceita apenas HEX de seis dígitos, como
#FFFFFF. Formas curtas (#FFF),rgb(),hsl()e canal alfa não são lidos. - A ferramenta não sabe o tamanho do texto. Você decide qual selo vale: texto grande é a partir de 18 pontos (24 px) ou 14 pontos em negrito (cerca de 18,66 px).
- Não sugere a cor mais próxima que passaria; ajuste o HEX e observe a razão mudar.
- Usa a fórmula da WCAG 2. O método APCA, discutido para a WCAG 3, dá números diferentes e ainda não é norma.
Privacidade
O cálculo roda inteiro no navegador. Cores de uma identidade visual ainda não lançada não são enviadas ao servidor.
Para continuar
Como Testar Contraste de Cores Seguindo a WCAG 2.2 detalha os critérios e o processo de auditoria, e WCAG e Encartes Digitais mostra o impacto em conversão no varejo. Para montar uma paleta e testar os pares aqui, use o Gerador de Paleta de Cores; para fundo em degradê, o Gerador de CSS Gradient ajuda a escolher as cores das pontas, que são as que você deve medir.
Perguntas frequentes
O que é a razão de contraste WCAG?
É a medida da diferença de luminância entre a cor do texto e a do fundo, de 1:1 a 21:1. A WCAG 2 pede no mínimo 4,5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 e 4,5:1 no nível AAA.
Qual a diferença entre os níveis AA e AAA?
AA é o nível adotado como referência por normas e contratos de acessibilidade, incluindo o modelo brasileiro e-MAG, que se baseia na WCAG. AAA é mais restritivo e costuma ser aplicado a conteúdos específicos, como textos longos e serviços públicos, porque nem toda identidade visual consegue cumpri-lo em todos os elementos.
O que conta como texto grande na WCAG?
Texto a partir de 18 pontos, cerca de 24 pixels, ou a partir de 14 pontos em negrito, cerca de 18,66 pixels. Preços de destaque em encarte costumam ser texto grande; descrição do produto e regulamento, não.
Contraste baixo afeta o SEO?
Não diretamente: o contraste não é fator de ranqueamento do Google. O efeito é indireto, porque texto difícil de ler aumenta a desistência e reduz a conversão, e ferramentas de auditoria como o Lighthouse apontam contraste insuficiente como problema de acessibilidade.
Quais combinações de cor de encarte costumam reprovar?
Amarelo sobre branco (#FFD700 sobre #FFFFFF, 1,40:1) reprova em tudo. Amarelo sobre vermelho (#FFD700 sobre #D00000, 4,07:1) só passa para texto grande. Branco sobre vermelho #E30613 passa em AA com pouca margem (4,88:1), e texto quase preto sobre amarelo passa com folga (14,02:1).