Contrast Checker — Ferramenta Gratuita de Relação de Contraste de Acessibilidade WCAG

A cor é uma das ferramentas mais poderosas no design, mas também pode ser uma das mais exclusivas. Uma paleta de cores bonita significa nada se seus usuários não conseguem ler o texto. O contraste pobre é a falha de acessibilidade mais comum na web, afetando mais de 300 milhões de pessoas com deficiência na visão da cor e incontáveis outros que usam dispositivos móveis sob luz solar forte ou telas envelhecidas com brilho desbotado. Nosso Contrast Checker gratuito calcula instantaneamente a relação de contraste entre quaisquer duas cores e informa exatamente onde elas se situam em relação aos padrões WCAG AA e AAA — para que você possa projetar inclusivamente sem adivinhar.

O Que É Contraste de Cor e Por Que Ele Importa?

O contraste de cor é a diferença na luminosidade percebida entre duas cores. Quando o texto está em um fundo, o contraste entre eles determina se o texto é legível. Se as cores forem muito semelhantes em luminosidade, elas se fundem e tornam-se invisíveis para pessoas com baixa visão, daltonismo ou até mesmo usuários que apertam os olhos em uma tela sob luz solar direta.

As Diretrizes de Acessibilidade do Conteúdo da Web (WCAG) definem o contraste matematicamente usando luminosidade relativa — uma medida de quão brilhante uma cor parece aos olhos humanos. A fórmula leva em consideração o fato de que nossos olhos são mais sensíveis à luz verde do que à vermelha ou azul. Uma cor verde brilhante pode parecer mais clara do que uma vermelha brilhante, mesmo que tenham a mesma luminosidade numérica em RGB. A fórmula WCAG corrige isso, produzindo uma relação de contraste que reflete com precisão a percepção humana.

A relação varia de 1:1 (cores idênticas, sem contraste) a 21:1 (preto puro em branco puro, máximo contraste). A maioria dos designs acessíveis cai em algum lugar no meio. Uma relação de 4,5:1 é o mínimo para texto normal sob WCAG AA. 7:1 é o padrão mais rigoroso AAA. Esses números não são aleatórios — são baseados em pesquisas extensas sobre o que pessoas com diferentes deficiências visuais realmente conseguem distinguir.

Além da acessibilidade, o contraste afeta todos. Designs de alto contraste são mais fáceis de ler em telas pequenas, ambientes brilhantes e para usuários com mais de 40 anos cujos olhos naturalmente perdem a sensibilidade ao contraste. Texto de baixo contraste pode parecer elegante em um monitor calibrado de um designer, mas torna-se ilegível em um laptop de baixo custo, uma tela de celular rachada ou um projetor em uma sala iluminada.

Como Usar o Contrast Checker

Testar uma combinação de cores leva segundos. Escolha duas cores e obtenha uma avaliação instantânea.

1. Escolha sua cor de primeiro plano. Isso geralmente é sua cor de texto. Clique no swatch de cor para abrir o seletor nativo, ou digite um código HEX diretamente no campo de entrada.
2. Escolha sua cor de fundo. Isso é a superfície atrás do seu texto. Use o mesmo seletor ou insira um código HEX manualmente.
3. Leia a relação de contraste. A ferramenta exibe a relação exata de contraste de forma proeminente — por exemplo, 7,23:1 — para que você saiba exatamente onde está.
4. Verifique a conformidade WCAG. A tabela de resultados mostra o status de passar ou falhar para:
   • Texto normal em WCAG AA (4,5:1) e AAA (7:1)
   • Texto grande em WCAG AA (3:1) e AAA (4,5:1)
   • Componentes de interface do usuário em WCAG AA (3:1)
5. Visualize as cores no contexto. A ferramenta mostra amostras de texto normal e de títulos grandes renderizados com sua combinação escolhida, para que você possa julgar a legibilidade real visualmente.
6. Troque as cores com o botão de virar para testar a combinação reversa — texto claro em fundo escuro em vez de texto escuro em fundo claro.
7. Copie a relação para sua área de transferência com um clique para documentação ou notas do sistema de design.

Todo o processo é instantâneo. Ajuste qualquer cor e veja a relação, a tabela de conformidade e a pré-visualização atualizarem-se em tempo real.

Entendendo Relações de Contraste

Intervalo da Relação	Nível de Acessibilidade	O Que Isso Significa
1:1 a 2,99:1	Falha em todos os padrões	O texto é apenas distinguível do fundo; inutilizável para qualquer conteúdo legível
3:1 a 4,49:1	Passa AA apenas para texto grande e UI	Adequado para títulos grandes (18pt+), botões, ícones e bordas; falha para texto de corpo
4,5:1 a 6,99:1	Passa AA para todos os textos	Atende ao mínimo padrão para texto de corpo normal; legível para a maioria dos usuários
7:1 a 21:1	Passa AAA para texto normal	Acessibilidade aprimorada; legível para usuários com perda significativa de visão; ideal para conteúdo longo

O Que Conta como "Texto Grande"?

A WCAG define texto grande como 18 pontos (24 pixels) ou mais, ou 14 pontos em negrito (aproximadamente 18,67 pixels em negrito) ou mais. Títulos, botões de ação e texto heroico frequentemente se enquadram como texto grande, o que significa que eles podem passar com uma relação de contraste menor do que o texto de corpo. No entanto, visar pelo menos 4,5:1 em todos os lugares ainda é uma prática recomendada porque garante consistência e protege seu design contra redimensionamento e zoom.

Por Que a Fórmula Usa Luminosidade Relativa

A fórmula de contraste WCAG não é uma simples comparação de valores RGB. Primeiro, converte cada cor em luminosidade relativa — uma medida da luminosidade percebida que pondera a verde mais pesado do que o vermelho ou azul porque os olhos humanos são mais sensíveis à luz verde. É por isso que duas cores com valores de luminosidade idênticos em RGB podem produzir contrastes muito diferentes. Um vermelho puro (#FF0000) e um verde puro (#00FF00) ambos têm intensidade máxima em um canal, mas o verde parece muito mais brilhante aos olhos humanos, então sua luminosidade relativa é maior.

Recursos Principais

Recurso	O Que Ele Faz	Por Que Ele Importa
Cálculo de Contraste em Tempo Real	Calcula a relação WCAG instantaneamente enquanto você ajusta as cores	Itere por opções de paleta e veja a conformidade atualizar-se imediatamente
Teste WCAG AA & AAA	Mostra pass/fail para texto normal, texto grande e componentes de UI em ambos os níveis	Saiba exatamente quais padrões você atende sem memorizar limites
Pré-visualização de Texto em Tempo Real	Renderiza amostras de texto de corpo e títulos grandes com suas cores	Julgue a legibilidade visualmente, não apenas matematicamente
Troca de Cores	Inverte primeiro plano e fundo com um clique	Teste variantes de texto claro em fundo escuro e texto escuro em fundo claro instantaneamente
Entrada HEX	Aceita códigos HEX diretos para correspondência de cor precisa	Corresponda exatamente cores de marca do seu sistema de design
Copiar Relação	Copia a relação de contraste para a área de transferência	Documente conformidade de acessibilidade em especificações de design e auditorias
Primeiro a Privacidade	Todos os cálculos são executados no seu navegador	Nenhuma informação de design é enviada para qualquer servidor

Diferente de ferramentas básicas de contraste que apenas mostram um número, este verificador coloca a relação no contexto. Você não só vê que sua combinação tem 4,2:1, mas também que ela falha em AA para texto de corpo enquanto passa para texto grande — informação ação que ajuda você a decidir se escurecer seu texto ou aumentar o tamanho da fonte.

Casos de Uso no Mundo Real

Designers de Web Criando Interfaces Acessíveis Um designer está construindo uma página de destino com fundo azul marinho escuro e texto cinza claro. A combinação parece elegante em seu monitor, mas o verificador de contraste revela uma relação de apenas 3,8:1 — falhando em AA para texto de corpo. O designer clareia o texto levemente, alcançando 4,6:1, e agora a página é legível para usuários com baixa visão sem sacrificar o estilo escuro.

Desenvolvedores Implementando Sistemas de Design Um desenvolvedor mantém uma biblioteca de componentes com dezenas de tokens de cor. Antes de liberar um novo tema, ele executa cada par de texto e fundo pelo verificador de contraste. Detectar falhas cedo impede bugs de acessibilidade de chegar à produção e evita o custoso reprojeto de componentes após uma auditoria.

Criadores de Conteúdo Formatando Documentos Um marketer cria um guia PDF com caixas de destaque coloridas e texto destacado. Ele usa o verificador de contraste para verificar que cada cor de texto em cada fundo passa WCAG AA. Isso garante que o PDF seja acessível quando convertido para HTML ou lido por leitores de tela, e protege a organização de reclamações relacionadas à acessibilidade.

Gerentes de Produto Realizando Auditorias de Acessibilidade Um PM está se preparando para uma revisão de VPAT (Voluntary Product Accessibility Template). Ele usa o verificador de contraste para testar cada combinação de cor em sua aplicação contra os padrões WCAG, documentando as relações para cada uma. Isso cria um rastro de auditoria que demonstra diligência e conformidade.

Educaçao Criando Materiais de Aprendizado Um professor constrói um curso online com slides, quizzes e materiais de leitura. Ele verifica cada combinação de texto e fundo para garantir que os alunos com deficiências visuais possam participar igualmente. O alto contraste também beneficia alunos assistindo aulas em celulares ou tablets sob condições de iluminação variáveis.

Designers de Aplicativos Móveis Telas móveis são vistas em todos os lugares — ao ar livre sob luz solar, dentro de ambientes sob luz fluorescente e na cama com modo noturno ativado. Um verificador de contraste ajuda designers a considerar essas condições variáveis garantindo que combinações tenham espaço suficiente para permanecerem legíveis quando a luminosidade é baixa, telas estão sujas ou filtros anti-reflexo são aplicados.

Dicas e Boas Práticas

• Procure atingir AAA quando possível. Embora AA seja o mínimo legal em muitas jurisdições, AAA fornece uma experiência melhor para todos. Se suas cores de marca conseguem atingir 7:1 sem conflitar, use-as. O pequeno compromisso visual é compensado pelo grande ganho de acessibilidade.
• Não dependa apenas de cor. Mesmo com contraste perfeito, a cor não é acessível para todos. Usuários daltonianos podem não distinguir vermelho de verde. Sempre combine cor com ícones, rótulos, padrões ou texto para transmitir significado.
• Teste sua paleta inteira. Um sistema de design pode ter dez cores de texto e dez cores de fundo. Isso é cem combinações possíveis. Testar sistematicamente cada par — ou ao menos os mais comuns — impede que falhas de acessibilidade se escondam.
• Verifique estados de foco e elementos interativos. Botões, links, campos de formulário e alternadores precisam ter pelo menos 3:1 de contraste contra sua área circundante. Um botão que passa para texto pode falhar como componente de UI se sua borda for muito sutil.
• Considere transparência e overlays. Se seu texto estiver em uma imagem ou overlay semi-transparente, o fundo efetivo é uma mistura de cores. O verificador de contraste testa cores sólidas, então para overlays você precisa calcular o resultado misturado primeiro ou testar conservadoramente.
• Teste em diferentes níveis de zoom. Usuários com baixa visão zoomam até 200% ou mais. Em zoom alto, o texto aparece maior, o que ajuda, mas o contraste relativo permanece o mesmo. Garanta que suas relações sejam fortes o suficiente para resistir à magnificação.
• Documente suas relações. Quando você finaliza uma combinação de cores, registre sua relação de contraste na documentação do seu sistema de design. Isso ajuda futuros designers e desenvolvedores a manter a acessibilidade conforme o produto evolui.

Perguntas Frequentes

O Contrast Checker é gratuito para usar?

Sim. O Contrast Checker é totalmente gratuito, sem limites de uso, sem registro e sem anúncios. Você pode testar tantas combinações de cores quantas precisar.

O que é WCAG?

WCAG significa Diretrizes de Acessibilidade do Conteúdo da Web. É um padrão internacionalmente reconhecido publicado pela W3C que define como tornar conteúdo da web acessível a pessoas com deficiências. A versão atual é WCAG 2.1, e a WCAG 2.2 adiciona critérios adicionais. As diretrizes são organizadas em três níveis: A (mínimo), AA (padrão) e AAA (aumentado).

Qual relação de contraste preciso para passar WCAG AA?

Para texto normal (abaixo de 18pt ou 14pt em negrito), você precisa de pelo menos 4,5:1. Para texto grande (18pt ou maior, ou 14pt em negrito ou maior) e componentes de interface do usuário como botões e campos de formulário, você precisa de pelo menos 3:1.

Qual a diferença entre WCAG AA e AAA?

AA é o nível de conformidade padrão exigido pela maioria das leis e diretrizes de acessibilidade no mundo, incluindo a Seção 508 nos Estados Unidos e a Diretiva Europeia de Acessibilidade. AAA é um nível aprimorado que oferece maior acessibilidade, mas não é exigido em todos os lugares e às vezes é considerado excessivamente rigoroso para conteúdo web geral. Para AAA, o texto normal precisa de 7:1 de contraste e o texto grande precisa de 4,5:1.

Posso testar cores RGB ou HSL?

A ferramenta aceita entrada direta de código HEX. Se você tiver valores RGB ou HSL, use primeiro nossa Ferramenta de Seletor de Cor para convertê-los em HEX. Insira o código HEX na Contrast Checker e teste instantaneamente.

Esta ferramenta funciona em dispositivos móveis?

Sim. O Contrast Checker é totalmente responsivo e funciona em smartphones e tablets. Os seletores de cor, texto de pré-visualização e tabela de resultados são todos otimizados para telas sensíveis ao toque e telas menores.

Posso usar isso para design gráfico?

Embora WCAG tenha sido especificamente projetado para conteúdo digital, os princípios de contraste também se aplicam ao design gráfico. Uma relação de 4,5:1 ou superior geralmente garante texto legível em materiais impressos. No entanto, designers gráficos também devem considerar cobertura de tinta, qualidade do papel e distância de visualização, além das relações de contraste digitais.

O que acontece se minhas cores de marca falharem WCAG?

Se suas cores de marca não atenderem à relação necessária, você tem várias opções. Clareie ou escurifique o texto levemente. Aumente o tamanho da fonte para que o texto se qualifique como "texto grande", que requer uma relação menor. Adicione uma sombra ou contorno ao texto para aumentar o contraste percebido. Ou use a cor não conforme apenas para elementos decorativos e escolha uma alternativa acessível para texto funcional.