Verificador de Contraste de Cores

Verificador de Contraste de Cores - Ferramenta de Acessibilidade WCAG

Um verificador abrangente de contraste de cores que avalia combinações de cores de primeiro plano e plano de fundo contra diretrizes WCAG 2.1. Testa níveis de conformidade AA e AAA para texto normal (menos de 18pt ou 14pt negrito) e texto grande (18pt ou maior, ou 14pt negrito ou maior). Recursos incluem cálculo de razão de contraste em tempo real, ferramentas de ajuste de cores, combinações predefinidas e recomendações para melhorar acessibilidade. Essencial para designers, desenvolvedores e qualquer pessoa criando conteúdo web acessível. Veja também nosso Gerador de Paleta de Cores e nosso Seletor de Cores Pro.

Por que a razão de contraste WCAG AA importa para meu site?

WCAG 2.1 AA é o benchmark de acessibilidade referenciado pela maioria das leis de acessibilidade mundo afora — a ADA nos Estados Unidos, o European Accessibility Act, o Equality Act do Reino Unido e a Section 508 para compras federais. Falhar no contraste AA (4.5:1 para texto corpo, 3:1 para texto grande) significa que leitores com baixa visão, alterações maculares relacionadas à idade, daltonismo ou apenas reflexo em tela de celular não conseguem ler seu conteúdo com confiabilidade. Também custa dinheiro: cerca de 1 em cada 4 adultos tem alguma limitação visual funcional, motores de busca rebaixam páginas com baixa acessibilidade sob sinais de conteúdo útil, e processos por sites de comércio inacessíveis subiram ano após ano. Tratar AA como piso (não teto) lhe dá segurança jurídica, alcance maior e SEO melhor ao mesmo tempo.

Qual a diferença entre os níveis WCAG AA e AAA?

AA é o nível mínimo legalmente referenciado: contraste 4.5:1 para texto corpo normal (menos de 18pt regular ou 14pt negrito) e 3:1 para texto grande (18pt regular ou maior, ou 14pt negrito ou maior). AAA é o nível elevado: 7:1 para texto corpo e 4.5:1 para texto grande. AA pretende ser alcançável preservando a maioria das escolhas de marca; AAA é para conteúdo onde acessibilidade é crítica — serviços governamentais, saúde, finanças, educação para idosos. AAA é mais difícil porque cores de marca vibrantes ou pastéis raramente passam 7:1 contra branco. A receita pragmática que a maioria das equipes segue: mirar AA em toda a UI, empurrar texto corpo para AAA quando possível usando preto puro ou quase preto em superfícies brancas puras, e nunca deixar nenhum controle ativo cair abaixo de AA.

Como exatamente a razão de contraste é calculada?

WCAG usa a fórmula (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância relativa da cor mais clara e L2 da mais escura. A luminância relativa é calculada por pixel: converta cada canal RGB de 0-255 para fração 0-1, aplique correção gamma sRGB (canal / 12.92 se canal ≤ 0.03928, caso contrário ((canal + 0.055) / 1.055)^2.4), depois some L = 0.2126 R + 0.7152 G + 0.0722 B. Os pesos correspondem a como células cone do olho respondem — verde domina porque cai na banda mais sensível. A constante 0.05 evita divisão por zero para preto puro. Preto puro sobre branco puro dá a razão máxima possível de 21:1; branco puro sobre branco dá 1:1. Qualquer valor abaixo de 3:1 falha para qualquer tamanho de texto.

E se minha cor de marca não passar — tenho que mudar a marca?

Não — você muda onde usa a cor de marca, não a marca em si. O padrão que a maioria dos design systems segue: trave o HEX original da marca como token de "marketing" ou "decorativo", usado para logos, fundos hero com texto sobreposto e tipografia display grande onde 3:1 basta. Depois gere derivados acessíveis escurecendo a cor de marca até passar 4.5:1 contra branco (ou clareando para temas escuros), e use esses derivados para botões, links e texto corpo. Tailwind, Material e IBM Carbon todos entregam rampas pareadas exatamente por essa razão. Os botões Clarear e Escurecer desta ferramenta encontram o valor mais próximo que passa mantendo o mesmo matiz, então o derivado ainda parece da marca.

Quando o limiar de contraste 3:1 se aplica em vez de 4.5:1?

Três situações qualificam para o limiar mais baixo de 3:1 sob WCAG 2.1. Primeira, texto grande — definido como pelo menos 18pt regular (cerca de 24px) ou 14pt negrito (cerca de 18.5px) — porque formas de letra maiores são mais fáceis de discriminar. Segunda, componentes UI não-texto como bordas de campos de formulário, contornos de foco, ícones e objetos gráficos (sob SC 1.4.11): devem atingir 3:1 contra cores adjacentes, não 4.5:1. Terceira, texto incidental em logos ou decoração pura. Armadilhas importantes: rótulos de botão são texto normal e precisam 4.5:1 mesmo se o botão em si for grande; texto placeholder precisa 4.5:1 porque transmite instruções; UI desabilitada só é isenta se não puder ser interagida de jeito nenhum. Na dúvida, mire 4.5:1 — cobre a maioria dos casos sem auditorias separadas.

Como melhoro o contraste sem quebrar o layout?

Cinco alavancas de baixo risco. (1) Escureça o primeiro plano em HSL 10-20% de luminosidade — o matiz permanece, a marca parece igual. (2) Coloque o texto em negrito: 14pt negrito passa com 3:1 em vez de 4.5:1, então o peso faz parte do trabalho. (3) Aumente o tamanho da fonte para cruzar o limiar de texto grande (18pt regular ou 14pt negrito) e a razão exigida cai. (4) Adicione um fundo sólido sutil sob o texto em vez de colocá-lo em um gradiente ou imagem carregada — camadas de sobreposição (um véu rgba(0,0,0,0.55)) restauram contraste consistente em seções inteiras. (5) Use um par de cores completamente diferente para o emparelhamento que falha, mesmo que o resto da paleta mantenha as cores de marca — por exemplo, use teal de marca para fundos mas slate quase preto para qualquer texto em card branco.

Como lido com contraste em cima de gradientes, fotos ou fundos de vídeo?

Fundos de imagem e gradiente mudam contraste pixel a pixel, então o verificador não pode avaliar cada posição automaticamente — você precisa identificar o ponto pior. Três correções padrão: (1) Sobreponha uma cor plana semi-transparente entre o fundo e o texto (background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("hero.jpg");) para que o primeiro plano veja um fundo uniforme; amostre essa cor de fundo combinada no verificador. (2) Envolva o texto em um card opaco com seu próprio preenchimento sólido para que nunca toque a mídia subjacente. (3) Adicione uma sombra de texto suave (text-shadow: 0 1px 4px rgba(0,0,0,0.65)) para destacar formas de letra de áreas carregadas; sombras não substituem contraste mas elevam a razão efetiva na maioria dos monitores. WCAG 2.1 SC 1.4.3 ainda se aplica à combinação texto-sobre-fundo renderizada, então teste em um navegador real, não apenas no arquivo de design.

APCA (o algoritmo de contraste proposto para WCAG 3) torna esses resultados obsoletos?

Não para conformidade atual. APCA (Accessible Perceptual Contrast Algorithm) é um modelo perceptual sensível à polaridade sendo explorado para WCAG 3, que ainda está em rascunho e ainda não é referenciado legalmente em lugar algum. WCAG 2.1 e 2.2 — ambas usam a fórmula simples de razão de luminância que esta ferramenta implementa — permanecem o padrão ativamente citado em leis, casos judiciais e diretrizes de compras até 2026 e quase certamente além. APCA corrige limitações reais: a fórmula 2.x subponderaria contrastes de tons médios cinzas e trata claro-sobre-escuro identicamente a escuro-sobre-claro mesmo que o olho os perceba de forma diferente. A receita pragmática hoje: use razões WCAG 2.1 para conformidade (esta ferramenta), pré-visualize texto corpo com valor APCA também se seu design system suportar (Sass-WCAG ou APCA online), e revise uma vez que WCAG 3 atinja status de Candidate Recommendation.

Recursos Principais

• Cálculo de razão de contraste em tempo real
• Verificação de conformidade WCAG 2.1 AA
• Verificação de conformidade WCAG 2.1 AAA
• Contraste de texto normal (4,5:1, 7:1)
• Contraste de texto grande (3:1, 4,5:1)
• Visualização ao vivo de combinações de cores
• Texto de amostra em tamanho normal
• Texto de amostra em tamanho grande
• Indicadores Aprovado/Reprovado para cada nível
• Seletor de cores para primeiro plano
• Seletor de cores para plano de fundo
• Entrada manual de cor hex
• Trocar cores de primeiro plano/plano de fundo
• Ajuste de cor Clarear/Escurecer
• Sugerir cores similares que passam
• Combinações predefinidas de alto contraste
• Exibição de informações de cores (HEX, RGB, HSL)
• Cálculo de luminância relativa
• Explicações detalhadas WCAG
• Design responsivo para mobile
• Suporte a modo escuro
• Processamento 100% do lado do cliente
• Nenhum dado enviado para servidores
• Copiar códigos de cores para área de transferência
• Design focado em acessibilidade