Por Carlos Zucolli | Especialista em Tecnologia para o Varejo
Calculadora de Contraste WCAG
Verifique a acessibilidade entre cor de fundo e cor de texto conforme as diretrizes WCAG 2.1.
The quick brown fox jumps over the lazy dog. Texto em negrito para referência.
Razão de Contraste—
AA — Texto Normal (≥ 4.5:1)—
AA — Texto Grande (≥ 3.0:1)—
AAA — Texto Normal (≥ 7.0:1)—
AAA — Texto Grande (≥ 4.5:1)—
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.
O que é o Calculadora de Contraste WCAG?
A Calculadora de Contraste WCAG é uma ferramenta profissional para designers e desenvolvedores web que desejam garantir a acessibilidade de seus projetos. Ela avalia o contraste de cores conforme os critérios de acessibilidade web WCAG 2.1 AA e AAA, determinando se a combinação de cores escolhida permite leitura adequada para pessoas com baixa visão ou daltonismo. Um bom contraste é fundamental para tornar seu site acessível a todos.
Como usar o Calculadora de Contraste WCAG?
Use a ferramenta selecionando a cor do texto e a cor do fundo nos campos de entrada, ou digitando códigos hexadecimais diretamente. A calculadora exibe instantaneamente a razão de contraste (contrast ratio) e indica se a combinação atende aos critérios AA (4.5:1 para texto normal) ou AAA (7:1 para texto normal). Você também recebe recomendações de ajustes se a combinação não passar nos testes.
Casos de uso práticos do Calculadora de Contraste WCAG
Conformidade com WCAG é essencial em projetos comerciais e governamentais, frequentemente exigida por lei em muitos países. Além da conformidade legal, melhorar contraste beneficia todos os usuários em ambientes com luz solar intensa ou em dispositivos com telas de baixa qualidade. Investir em acessibilidade aumenta o alcance do seu produto e demonstra responsabilidade corporativa.
Como Usamos Isso na NuAto
Cenário: Auditoria de Acessibilidade de Tabloide Digital com Preços em Amarelo sobre Branco
O tabloide digital de uma grande rede de varejo alimentar com mais de 180 lojas usava há anos uma combinação de cores que o time de design considerava "a identidade visual da marca": preços em amarelo (#FFD700) sobre fundo branco (#FFFFFF). A combinação tinha ratio de contraste de 1,3:1 — muito abaixo do mínimo de 4,5:1 exigido pelo WCAG 2.1 nível AA para texto normal. Internamente, ninguém havia questionado a escolha porque os materiais eram aprovados visualmente em monitores calibrados em ambiente iluminado de escritório. O problema emergia nos tablets de PDV das lojas, sob iluminação fluorescente intensa, onde os preços simplesmente desapareciam visualmente para uma parcela significativa dos clientes — especialmente os mais velhos, que representam 38% da base de frequentadores dessa rede específica.
Usamos o Verificador de Contraste para documentar o problema com dados objetivos e construir o caso para a diretoria de marketing. Verificamos 14 combinações de cor do tabloide e identificamos que 9 delas estavam abaixo do mínimo AA. Em seguida, usamos a ferramenta para iterar sobre variações do amarelo da marca até encontrar uma versão que mantivesse a identidade visual e alcançasse contraste AA: o #B8860B (dourado escuro) sobre branco atingiu ratio de 4,8:1, passando em AA. Documentamos o antes e depois com screenshots e ratios para apresentação.
A diretoria aprovou um A/B test com o tabloide versão WCAG-compliant em 40 lojas selecionadas. Após 4 semanas, os dados mostraram aumento de 18% no CTR de links de produto no tabloide digital e redução de 7% nas ligações para a central perguntando preços de produtos específicos (proxy de legibilidade). O resultado foi suficiente para justificar a atualização do guia de identidade visual com os novos valores de cor aprovados para fundos claros.
Acessibilidade em varejo não é apenas questão ética ou legal — é questão de conversão. Um preço ilegível é um produto que não se vende. O Verificador de Contraste transforma uma decisão subjetiva de design em dado objetivo que qualquer diretoria consegue avaliar e aprovar.