Contrast Checker: Ferramenta de Ratio WCAG

O que é o Contrast Checker?

O Contrast Checker calcula o ratio de contraste baseado em luminância entre uma cor de primeiro plano e uma cor de fundo para determinar se a combinação atende aos padrões de acessibilidade WCAG 2.1. Ele testa contra todos os quatro limites de conformidade: AA e AAA para texto normal, e AA e AAA para texto grande. A ferramenta exibe uma prévia de texto ao vivo para que você possa ver exatamente o que os leitores experimentarão. Auditores de acessibilidade, designers de UI e desenvolvedores front-end a utilizam antes de publicar qualquer nova combinação de cores para evitar falhas de contraste em produção. Tudo funciona no navegador — sem chamadas ao servidor, sem login.

Funcionalidades principais

• Cálculo de ratio de contraste WCAG 2.1 — Usa a fórmula padrão de luminância relativa (com o limiar de linearização 0,03928 e a fórmula de ratio (L1 + 0,05) / (L2 + 0,05)) para produzir resultados consistentes com as ferramentas WCAG oficiais.
• Verificação de conformidade AA e AAA — Quatro badges de conformidade se atualizam em tempo real: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grande AA (≥ 3:1) e Grande AAA (≥ 4,5:1). Badge verde com marca de verificação significa que passou; badge vermelho com X significa que falhou.
• Limites para texto normal e grande — A ferramenta aplica limites separados para texto normal e texto grande (definido como 18pt ou 14pt em negrito), em consonância com o Critério de Sucesso 1.4.3 do WCAG 2.1.
• Prévia em tempo real com texto de amostra — O cartão de prévia renderiza um título, parágrafo de corpo, texto pequeno e um botão usando suas cores escolhidas, para avaliar a legibilidade de relance.
• Copiar ratio de contraste para a área de transferência — Clique no ícone Copiar ao lado da exibição do ratio para gravar a string do ratio (ex.: 4,53:1) na área de transferência e registrar a verificação no histórico.
• Funciona offline após o carregamento — Todos os cálculos de ratio são implementados em JavaScript sem chamadas de API externas.

Como usar o Contrast Checker

Passo 1: Definir a cor de primeiro plano

Navegue até o Contrast Checker. A ferramenta abre com preto (#000000) como primeiro plano e branco (#FFFFFF) como fundo — um ratio de 21:1 que passa nos quatro níveis WCAG.

Defina a cor de primeiro plano (texto) de uma das seguintes formas:

• Clicando na amostra de cor (quadrado colorido) para abrir o seletor de cor nativo do navegador
• Digitando um código hexadecimal diretamente no campo de texto ao lado da amostra (ex.: #1E293B)

Tanto a amostra quanto o campo de texto permanecem sincronizados. A amostra de prévia abaixo dos campos exibe a cor com texto de rótulo de contraste automático.

Passo 2: Definir a cor de fundo

Use os mesmos controles no lado direito do cartão de entrada de cores para definir a cor de fundo. A ferramenta usa um layout de três colunas: primeiro plano à esquerda, um botão de troca no centro e fundo à direita.

Passo 3: Ler o ratio de contraste e os badges de conformidade

O cartão Ratio de Contraste aparece abaixo dos campos e exibe:

• O ratio calculado em tipo pixel-art grande (ex.: 7,23:1)
• Um ícone Copiar para copiar a string do ratio
• Quatro badges de conformidade: Normal AA (≥ 4,5:1), Normal AAA (≥ 7:1), Grande AA (≥ 3:1), Grande AAA (≥ 4,5:1)

Um badge verde com ícone de marca de verificação indica que a combinação passa nesse nível. Um badge vermelho com X indica uma falha. Almeje pelo menos Normal AA para todo o texto do corpo.

Passo 4: Verificar a prévia ao vivo

Role até o cartão Prévia. Ele renderiza quatro elementos usando suas cores escolhidas:

• Um título grande (text-2xl)
• Texto de corpo (text-base)
• Texto pequeno (text-sm)
• Um botão com as cores trocadas (o primeiro plano torna-se fundo e vice-versa)

Esta prévia permite avaliar se as cores parecem legíveis antes de escrever qualquer código.

Passo 5: Trocar cores ou experimentar sugestões de paleta acessível

Clique no botão de troca (ícone de seta dupla) entre as duas entradas de cor para inverter instantaneamente o primeiro plano e o fundo. Isso é útil para testar as variantes claro sobre escuro e escuro sobre claro.

Role até o painel Pares de Cores Acessíveis na parte inferior da página. Ele exibe 20 combinações de cores com seus ratios de contraste. Clique em qualquer par para carregar essas duas cores na ferramenta. A maioria dos pares passa em AA (4,5:1), indicado por uma marca de verificação. Alguns pares passam apenas em Grande AA (3:1) e são marcados com um X — estes funcionam para títulos e grandes elementos de UI, mas não para texto de corpo normal.

Exemplos práticos

Verificar rótulo de botão contra seu fundo

Seu design usa texto branco #FFFFFF em um botão azul #3B82F6. Insira #FFFFFF como primeiro plano e #3B82F6 como fundo. A ferramenta calcula aproximadamente 3,7:1. O badge Normal AA falha (requer 4,5:1), mas Grande AA passa. É preciso escurecer o azul — tente #1D4ED8, que produz aproximadamente 6,7:1 e passa em Normal AA.

Validar uma cor de texto em modo escuro

Seu design em modo escuro usa texto #94A3B8 (slate-400) em fundo #0F172A (slate-900). Insira esses valores. O ratio retorna aproximadamente 6,96:1, passando em Normal AA, Grande AA e Grande AAA. Ele perde de pouco o Normal AAA (requer 7:1). Você pode usar essa combinação com confiança para texto de corpo no nível AA.

Testar uma cor de marca como cor de texto

Seu laranja de marca é #F97316. Você quer usá-lo como cor de link em fundo branco #FFFFFF. O ratio é aproximadamente 2,8:1 — falha em Normal AA. A prévia confirma que o texto parece legível para alguns usuários, mas falharia em uma auditoria de acessibilidade. Mude para um tom mais escuro como #C2410C (≈ 5,2:1) para passar em AA.

Dicas e boas práticas

Teste tanto primeiro plano sobre fundo quanto fundo sobre primeiro plano. O botão de troca permite reverter os papéis em um clique. Alguns padrões de UI (botões, seleções realçadas) usam a cor de primeiro plano como fundo de pequena área.

O painel Pares de Cores Acessíveis exibe ratios com uma casa decimal. Esses ratios calculados em tempo real são exibidos em cada cartão de amostra predefinida. Clique em qualquer amostra para carregar ambas as cores — use como ponto de partida quando precisar de uma paleta funcional rapidamente.

Os limites de texto grande se aplicam a 18pt (24px) ou 14pt em negrito (aproximadamente 18,67px em negrito). A ferramenta exibe os resultados Grande AA e Grande AAA para lembrá-lo de que os títulos têm limites mais permissivos. Uma combinação que falha em Normal AA ainda pode ser válida para uso exclusivo em títulos grandes.

Compartilhe resultados com uma URL. As cores atuais de primeiro plano e fundo são codificadas na URL da página. Copie a URL da barra de endereços após inserir suas cores para enviar uma verificação de contraste específica a um colega ou incluí-la em um documento de revisão de design.

Salve pares de cores comuns como predefinições. Contas de apoiadores podem salvar os valores hexadecimais de primeiro plano e fundo como uma predefinição nomeada. Isso é útil para equipes que verificam as mesmas combinações de cores da marca repetidamente.

Problemas comuns e solução de problemas

O ratio exibe 1:1 independentemente da entrada. Isso normalmente significa que ambos os campos de cor têm o mesmo valor. Verifique se inseriu cores diferentes no primeiro plano e no fundo. Se colou o mesmo hexadecimal em ambos os campos, um deles precisa ser alterado.

O badge de conformidade diz que falhou, mas eu achei que minhas cores estavam corretas. A fórmula WCAG é mais rigorosa do que pode parecer visualmente. Uma combinação preto sobre cinza escuro como texto #333333 em fundo #555555 produz apenas cerca de 1,7:1, muito abaixo de AA. Use o resultado da ferramenta em vez de confiar no julgamento visual.

A restauração do histórico não recarrega minhas cores. A função de restauração do histórico analisa entradas no formato FG: #XXXXXX / BG: #XXXXXX. Entradas registradas fora desta ferramenta (ou com dados corrompidos) podem não ser analisadas corretamente. Reinsira as cores manualmente nesses casos.

O botão Copiar ratio não mostra resposta. A API de área de transferência requer HTTPS ou localhost. Em HTTP simples, a gravação na área de transferência falha. A ferramenta exibe um toast de erro nesse caso. Clique com o botão direito no texto de exibição do ratio e use a opção de cópia nativa do navegador como alternativa.

O cartão de prévia mostra cores de texto inesperadas. A prévia renderiza o título e o texto do corpo na cor de primeiro plano sobre a cor de fundo. O botão na prévia troca intencionalmente as duas cores para demonstrar a combinação inversa.

Privacidade e segurança

O Contrast Checker realiza todos os cálculos localmente no seu navegador. A fórmula de luminância relativa e o cálculo do ratio de contraste são executados em JavaScript no seu dispositivo. Nenhum valor de cor é enviado a qualquer servidor. A ferramenta não requer conta, não define cookies de rastreamento e não registra quais combinações de cores você testa. Funciona completamente offline após o carregamento da página, tornando-a segura para avaliar cores em sistemas de design confidenciais ou diretrizes de marca não publicadas.

Perguntas frequentes

O Contrast Checker é gratuito?

Sim. A funcionalidade completa de verificação de contraste WCAG — incluindo os quatro badges de conformidade, prévia em tempo real, botão de troca e painel de paleta acessível — é completamente gratuita sem necessidade de conta. Funcionalidades de apoiador como predefinições, rastreamento de histórico e notas de ferramenta estão disponíveis com uma assinatura de apoiador Ko-fi.

O Contrast Checker funciona offline?

Sim. Uma vez carregada a página, todos os cálculos de contraste, renderização de prévia e atualizações de badges de conformidade funcionam sem acesso à rede. As fórmulas de luminância relativa e comparações de limites WCAG são JavaScript puro sendo executado no seu navegador.

Meus dados estão seguros com o Contrast Checker?

Sim. Nenhum dado de cor é transmitido a qualquer servidor. A ferramenta não faz nenhuma solicitação de rede durante uma verificação de contraste. Suas cores de primeiro plano e fundo existem apenas na memória do navegador e, se você usar o recurso de compartilhamento, são codificadas na URL que você escolhe copiar.

Qual versão do WCAG esta ferramenta segue?

A ferramenta implementa o Critério de Sucesso 1.4.3 do WCAG 2.1 (Contraste — Mínimo) e 1.4.6 (Contraste — Aprimorado). O nível AA requer um ratio de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA requer 7:1 para texto normal e 4,5:1 para texto grande. Esses limites correspondem aos valores exibidos nos badges de conformidade (Normal AA ≥ 4,5:1, Normal AAA ≥ 7:1, Grande AA ≥ 3:1, Grande AAA ≥ 4,5:1).

O que conta como "texto grande" no WCAG?

O WCAG define texto grande como texto de pelo menos 18 pontos (aproximadamente 24px) em peso regular, ou pelo menos 14 pontos (aproximadamente 18,67px) em negrito. A ferramenta rotula os terceiro e quarto badges de conformidade como "Grande AA" e "Grande AAA". A prévia renderiza um título em text-2xl que normalmente se enquadra na faixa de texto grande.

Como o ratio de contraste é calculado?

A ferramenta converte cada cor hexadecimal em luminância relativa usando a fórmula WCAG: cada canal RGB é linearizado (dividido por 255, depois aplicando a correção gamma sRGB: s / 12,92 se s <= 0,03928, caso contrário ((s + 0,055) / 1,055) ^ 2,4). A luminância é então 0,2126 R + 0,7152 G + 0,0722 * B. O ratio de contraste é (L_mais_claro + 0,05) / (L_mais_escuro + 0,05).

Posso testar cores que não sejam códigos hexadecimais?

Os campos de entrada de cor aceitam códigos hexadecimais digitados como texto (com ou sem #). Você também pode usar a amostra do seletor de cor nativo. Se você tiver um valor RGB ou HSL, use o Color Picker para convertê-lo primeiro em hexadecimal e depois cole-o aqui.

Qual é o ratio de contraste máximo possível?

O ratio de contraste máximo é de 21:1, que é o ratio entre preto puro (#000000) e branco puro (#FFFFFF). A ferramenta abre com essas duas cores por padrão para demonstrar o ratio máximo possível.

Posso usar isso para elementos de UI além de texto?

O WCAG 2.1 também abrange contraste não textual no Critério de Sucesso 1.4.11, que requer um ratio de 3:1 para componentes de UI e objetos gráficos. O badge Grande AA da ferramenta (≥ 3:1) corresponde a esse limiar e pode ser usado para avaliar cores de ícones, indicadores de foco e bordas de controles de formulário, mesmo que a prévia renderize texto.

Como compartilho uma verificação de contraste com minha equipe?

Após inserir suas cores de primeiro plano e fundo, a URL da página codifica ambos os valores. Copie a URL da barra de endereços e compartilhe diretamente. Destinatários que abrirem o link verão as mesmas cores pré-carregadas com uma notificação "Carregado do compartilhamento". Você também pode usar os botões de compartilhamento na parte inferior da página para publicar no Twitter, LinkedIn ou Reddit.

Ferramentas relacionadas

• Color Picker — Extraia valores hexadecimais exatos da sua tela ou designs existentes antes de testá-los aqui.
• Color Converter — Converta sua cor de RGB, HSL ou CMYK para hexadecimal antes de inseri-la no verificador de contraste.
• Em breve: Palette Generator — Gere uma paleta completa e verifique cada combinação no Contrast Checker para garantir a conformidade de acessibilidade.

Experimente o Contrast Checker agora: Glyph Widgets Contrast Checker