Verificador de Contraste
Verifique se suas cores de texto e fundo atendem aos padroes de acessibilidade WCAG. Calcula a taxa de contraste para niveis AA e AAA.
Principais recursos
- Cálculo da proporção de contraste em tempo real
- Verificação de conformidade WCAG 2.1 AA e AAA
- Suporte aos padrões de texto normal e grande
- Troca de cores e pré-visualização ao vivo
Guide
A acessibilidade de contraste de cores determina se o texto no seu site é legível para todos, incluindo pessoas com deficiências visuais. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem proporções específicas de contraste que o texto deve atender para ser considerado acessível. Não atender a esses padrões significa que alguns visitantes não conseguem ler seu conteúdo e, em muitas jurisdições, significa que seu site não está em conformidade com os requisitos legais de acessibilidade. Este guia explica como as proporções de contraste funcionam, o que o WCAG exige e como corrigir problemas de contraste sem comprometer seu design. Uma proporção de contraste compara a luminância relativa de duas cores em uma escala de 1:1 (nenhum contraste, ambas as cores idênticas) a 21:1 (contraste máximo, preto puro sobre branco puro). A luminância relativa é uma medida de quão brilhante uma cor parece ao olho humano, calculada a partir dos valores RGB da cor usando uma fórmula que considera como a visão humana percebe diferentes comprimentos de onda. Vermelho, verde e azul contribuem de forma diferente para o brilho percebido, com o verde contribuindo mais e o azul menos. A fórmula é: L = 0,2126 * R + 0,7152 * G + 0,0722 * B, onde R, G e B são linearizados a partir de seus valores sRGB. A etapa de linearização converte valores sRGB codificados em gamma para valores de luz linear aplicando uma função de transferência. A proporção de contraste em si é calculada como (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. O valor 0,05 considera a luz ambiente. Essa fórmula produz o formato familiar de proporção. Por exemplo, branco puro tem luminância 1,0 e preto puro tem luminância 0,0, dando uma proporção de contraste de (1,0 + 0,05) / (0,0 + 0,05) = 21:1. O WCAG define dois níveis de conformidade para contraste. O nível AA é o requisito básico para a maioria dos sites. O nível AAA é um padrão mais rigoroso que oferece melhor legibilidade. Para texto de tamanho normal (menos de 18pt ou menos de 14pt em negrito), o nível AA exige uma proporção de contraste de pelo menos 4,5:1 e o nível AAA exige 7:1. Para texto grande (18pt ou mais, ou 14pt em negrito ou mais), o nível AA exige 3:1 e o nível AAA exige 4,5:1. Esses limites são baseados em pesquisas sobre legibilidade para pessoas com visão subnormal moderada, aproximadamente acuidade 20/40, que é o limite típico de perda de visão para adultos mais velhos. A exceção de texto grande existe porque letras maiores são inerentemente mais fáceis de ler. Em tamanhos maiores, traços mais espessos e contraformas mais amplas tornam os caracteres mais distinguíveis mesmo em contraste mais baixo. É por isso que títulos, texto de destaque e outro texto display grande podem usar uma proporção de 3:1 sob conformidade AA enquanto o corpo de texto exige 4,5:1. Em termos de CSS, 18pt equivale a 24px nas configurações padrão do navegador e 14pt em negrito equivale a aproximadamente 18,66px em negrito. Se você não tem certeza se seu texto se qualifica como grande, aplique a proporção mais rigorosa de 4,5:1 para segurança. Elementos não textuais também têm requisitos de contraste sob o Critério de Sucesso 1.4.11 do WCAG 2.1 (Contraste Não Textual). Componentes de interface de usuário (botões, entradas de formulário, indicadores de foco) e objetos gráficos (ícones, elementos de gráficos) que são necessários para entender o conteúdo devem ter pelo menos uma proporção de contraste de 3:1 em relação às cores adjacentes. Uma borda de botão cinza claro em um fundo branco que fica abaixo de 3:1 torna o botão difícil de identificar como elemento clicável, especialmente para usuários com baixa visão. Indicadores de foco são particularmente importantes: usuários de teclado contam com estilos de foco visíveis para navegar, e esses estilos de foco devem atender à proporção de 3:1 em relação ao conteúdo ao redor. O daltonismo afeta aproximadamente 8% dos homens e 0,5% das mulheres de descendência do norte da Europa, com prevalência variável em outras populações. A forma mais comum é o daltonismo vermelho-verde (deuteranopia e protanopia), onde vermelhos e verdes parecem semelhantes. Daltonismo azul-amarelo (tritanopia) é menos comum. Daltonismo completo (acromatopsia) é raro. Cálculos de proporção de contraste baseados em luminância funcionam independentemente da percepção de cor porque medem a diferença de brilho, não a diferença de matiz. No entanto, depender apenas da cor para transmitir informações (vermelho para erro, verde para sucesso) cria problemas para usuários daltônicos independentemente da proporção de contraste. Sempre forneça indicações visuais adicionais como ícones, rótulos de texto ou padrões junto com a codificação de cores. O modo escuro introduz considerações adicionais de contraste. Muitos designers criam temas escuros simplesmente invertendo cores, mas isso costuma produzir resultados ruins. Texto branco puro (#FFFFFF) em fundo preto puro (#000000) cria contraste máximo (21:1), mas esse nível de contraste pode causar fadiga visual e halação (um efeito de brilho em torno de texto claro em fundos escuros) para alguns usuários. Um contraste ligeiramente reduzido, como #E0E0E0 em #121212, é mais confortável e ainda excede os requisitos WCAG AAA. As diretrizes de tema escuro do Material Design do Google recomendam usar #121212 como cor de superfície e reduzir a opacidade do texto em vez de usar branco puro. Texto primário usa 87% de opacidade, texto secundário usa 60% e texto desativado usa 38%. Cores semitransparentes complicam a verificação de contraste. Quando você usa cores rgba() ou hsla() com valores alfa menores que 1, a cor real renderizada depende do que está por trás. Texto branco a 70% de opacidade em um fundo escuro tem um contraste efetivo diferente do que o mesmo texto em um fundo claro. Ao verificar o contraste de texto semitransparente, você precisa calcular a cor composta (a cor real que o usuário vê depois que a transparência é aplicada contra o fundo). A fórmula combina primeiro plano e fundo com base no valor alfa: composta = primeiro plano * alfa + fundo * (1 - alfa), aplicada a cada canal. Sempre verifique o resultado composto, não a cor transparente isoladamente. Fundos em gradiente criam contraste variável por toda a área de texto. Se o texto está sobre um gradiente que transita de azul escuro a azul claro, a proporção de contraste difere nas bordas esquerda e direita do texto. O WCAG exige que a proporção de contraste seja atendida em todos os pontos onde o texto aparece. Verifique o contraste no ponto mais fraco, que é onde o fundo está mais próximo em luminância da cor do texto. Se o gradiente varia de #003366 a #6699CC e seu texto é branco, verifique o contraste contra #6699CC porque é onde ele será mais baixo. Para gradientes radiais, verifique múltiplos pontos por toda a área de texto. Fundos de imagem apresentam o maior desafio de contraste. Texto sobre fotografias ou fundos estampados terá contraste diferente em cada pixel. As soluções são: colocar uma sobreposição sólida ou semitransparente entre a imagem e o texto, usar sombra de texto ou contorno para garantir a legibilidade, ou restringir o texto a áreas da imagem com cor consistente. Um padrão comum é uma sobreposição de gradiente escuro na parte inferior de uma imagem de destaque onde o texto aparece. O gradiente escurece a imagem o suficiente para criar contraste suficiente com o texto branco. Para sobreposições, rgba(0, 0, 0, 0,5) tipicamente traz a maioria das imagens para conformidade WCAG AA com texto branco, mas verifique com suas imagens específicas. Espaços de cor e cálculos de contraste são mais complexos do que a maioria das ferramentas reconhece. A fórmula padrão de contraste do WCAG usa luminância relativa no espaço de cor sRGB. Essa fórmula tem limitações conhecidas. Ela pode superestimar o contraste de pares de cores muito escuras e subestimar o contraste de pares de cores claras. Pesquisas mostraram que um texto azul-escuro (#00007E) em fundo preto tecnicamente passa no WCAG AA, mas é extremamente difícil de ler na prática. O APCA (Algoritmo de Contraste Perceptual Avançado) é uma abordagem mais recente desenvolvida para o WCAG 3.0 que considera a percepção visual humana com mais precisão, incluindo o efeito de polaridade (texto escuro em fundos claros é percebido de forma diferente do que texto claro em fundos escuros). Embora o WCAG 2.x e sua fórmula baseada em sRGB continuem sendo o padrão legal atual, o APCA oferece uma avaliação mais precisa perceptualmente. O modelo APCA atribui diferentes requisitos de contraste com base no tamanho e peso da fonte, criando uma matriz de valores mínimos de contraste em vez da abordagem de limite binário do WCAG 2.x. Por exemplo, texto de 14px em peso normal precisa de um valor de contraste APCA maior do que texto de 24px em negrito. O APCA também trata a questão da polaridade: texto claro em fundos escuros exige valores de contraste diferentes do que texto escuro em fundos claros. Embora o APCA ainda não seja o padrão oficial, entendê-lo ajuda você a tomar melhores decisões de contraste, especialmente em casos extremos onde o WCAG 2.x produz resultados questionáveis. Corrigir falhas de contraste tipicamente envolve uma de três abordagens: escurecer o texto, clarear o fundo, ou ambos. Ao ajustar cores, fique dentro da sua paleta de marca modificando o valor de luminosidade no espaço de cor HSL em vez de mudar o matiz ou a saturação. Se o azul da sua marca é hsl(210, 80%, 55%) e ele falha no contraste contra branco, reduzir a luminosidade para hsl(210, 80%, 40%) pode passar enquanto permanece reconhecivelmente como o azul da sua marca. Pequenos ajustes de luminosidade costumam resolvem problemas de contraste sem exigir um redesenho completo. No espaço de cor OKLCH, esses ajustes produzem resultados ainda mais uniformes perceptualmente. Propriedades personalizadas CSS tornam a tematização consciente do contraste prática. Defina suas cores como valores HSL em propriedades personalizadas, depois crie variantes de tema claro e escuro que atendam aos requisitos de contraste. Por exemplo: --brand-primary: hsl(210, 80%, 40%) para tema claro e --brand-primary: hsl(210, 80%, 70%) para tema escuro. Ambas usam o mesmo matiz e saturação, mas valores de luminosidade diferentes otimizados para seus respectivos fundos. Essa abordagem escala para sistemas de design inteiros com dezenas de tokens de cor. Você mantém a consistência da marca enquanto atende aos requisitos de acessibilidade em todos os temas. A integração com o sistema de design é onde a verificação de contraste se torna mais valiosa. Em vez de verificar elementos individuais da página, defina seus tokens de cor e verifique se todas as combinações de texto-sobre-fundo no seu sistema de tokens passam nos requisitos do WCAG. Documente as combinações aprovadas em uma matriz de contraste que mostra quais cores de texto são seguras em quais cores de fundo. Então, quando os desenvolvedores construem componentes, eles selecionam entre pares de cores pré-aprovados e a conformidade de contraste é garantida pelo sistema em vez de verificada por instância. É assim que grandes organizações como Google, Microsoft e Adobe lidam com contraste em escala. Construir uma matriz de contraste envolve listar todas as suas cores de fundo no topo e todas as suas cores de texto na lateral, depois calculando a proporção de contraste para cada interseção. Marque cada célula como AA aprovado, AAA aprovado ou reprovado. Essa matriz se torna um documento de referência para toda a sua equipe. Quando um designer especifica uma combinação de cores, ele pode consultar a matriz instantaneamente. Quando um desenvolvedor implementa um componente, a matriz diz quais tokens de cor são seguros juntos. Testes automatizados detectam problemas de contraste cedo. Ferramentas como axe-core, Lighthouse e Pa11y escaneiam páginas renderizadas e sinalizam elementos que falham nos requisitos de contraste do WCAG. Integre-os ao seu pipeline de CI/CD para que regressões de contraste sejam detectadas antes da implantação. A limitação das ferramentas automatizadas é que elas não conseguem avaliar texto sobre imagens, gradientes ou fundos que mudam dinamicamente. Verificação manual com uma ferramenta de verificação de contraste permanece necessária para esses casos. Uma abordagem abrangente usa testes automatizados para a maioria dos casos e verificação manual para os casos extremos que a automação não consegue tratar. Conformidade legal impulsiona grande parte da urgência em torno da acessibilidade de contraste. A Lei dos Americanos com Deficiências (ADA) nos Estados Unidos, o European Accessibility Act na UE, a Lei de Acessibilidade para Ontarianos com Deficiências no Canadá e leis semelhantes em outras jurisdições exigem diretamente conformidade com o WCAG ou foram interpretadas pelos tribunais como exigindo. Processos sobre acessibilidade web aumentaram significativamente ano após ano, com falhas de contraste sendo um dos problemas mais comumente citados. Atender ao WCAG AA é o padrão legal amplamente aceito. Organizações em setores regulamentados (governo, saúde, educação, finanças) enfrentam requisitos mais rigorosos e fiscalização mais ativa. Além da conformidade legal, bom contraste é bom design. Texto fácil de ler converte melhor, retém visitantes por mais tempo e reduz as taxas de rejeição. Usuários lendo em celulares sob sol forte, usuários mais velhos com visão naturalmente declinante, usuários em monitores de baixa qualidade com reprodução de cor ruim e usuários que estão simplesmente cansados todos se beneficiam de forte contraste. Projetar para as extremidades da capacidade humana (baixa visão, ambientes desafiadores) produz designs que funcionam melhor também para todos no centro. Estudos mostraram que texto com maior contraste reduz o tempo de leitura e melhora a compreensão para todos os usuários, não apenas aqueles com deficiências visuais. Testar suas escolhas de contraste em condições reais significa verificar em múltiplos dispositivos, em várias condições de iluminação e com conteúdo real em vez de texto de espaço reservado. Um par de cores que passa na verificação matemática de contraste ainda pode ser difícil de ler se a fonte é fina, o texto é pequeno ou o espaçamento entre letras é apertado. A proporção de contraste é um mínimo necessário, não uma garantia de legibilidade. Combine contraste adequado com tamanho de fonte apropriado (mínimo 16px para corpo de texto), peso (regular ou médio, não light ou thin) e espaçamento (altura de linha de 1,5 ou mais) para os melhores resultados. Armadilhas comuns de contraste incluem texto de espaço reservado em entradas de formulário (costuma cinza claro em branco, falhando nos requisitos de contraste), texto de botão desativado (ainda precisa ser distinguível, mesmo que não atendendo aos requisitos totais de contraste), texto de link que depende apenas da cor para distingui-lo do texto ao redor (o WCAG exige uma indicação visual adicional como sublinhado, a menos que o contraste do link em relação ao texto ao redor seja de pelo menos 3:1) e texto sobre fundos decorativos onde o contraste varia conforme a posição. A acessibilidade da cor da marca é um desafio frequente. Equipes de marketing escolhem cores de marca por impacto emocional e apelo visual, não para conformidade com o WCAG. Uma cor de marca laranja brilhante (hsl(30, 100%, 50%)) tem uma proporção de contraste de apenas 2,14:1 contra branco, muito abaixo do requisito AA de 4,5:1 para texto normal. A solução é criar variantes acessíveis das cores da marca. Mantenha o matiz, ajuste a luminosidade. hsl(30, 100%, 35%) ainda é reconhecivelmente laranja, mas passa no AA contra branco a 4,6:1. Crie uma paleta de cores de marca com cores primárias para texto grande e elementos decorativos (contraste mais baixo aceitável) e variantes ajustadas para corpo de texto, links e componentes de interface (devem passar no AA). Visualização de dados e gráficos apresentam desafios únicos de contraste. Cada série de dados em um gráfico precisa ser distinguível das séries adjacentes e do fundo. Com cinco ou mais séries de dados, encontrar cores que todas contrastem suficientemente entre si e com o fundo é difícil. Paletas seguras para daltônicos (como as do ColorBrewer ou a paleta Okabe-Ito) são projetadas especificamente para esse propósito. Além da cor, use padrões, texturas ou rótulos diretos para distinguir séries de dados. Gráficos de linha podem usar diferentes padrões de tracejado. Gráficos de barras podem usar hachuras diagonais. Gráficos de dispersão podem usar formas diferentes. O contraste em diferentes ambientes de iluminação varia dramaticamente. Um par de cores confortavelmente legível em um escritório com pouca luz torna-se quase invisível sob luz solar direta. Usuários móveis frequentemente encontram condições externas brilhantes. Altas proporções de contraste oferecem uma margem contra fatores ambientais. Um par exatamente em 4,5:1 (o mínimo do AA) é legível em condições controladas, mas pode falhar sob luz solar forte. Visar 5:1 ou 6:1 oferece margem que considera condições reais de visualização. Para elementos críticos de interface (navegação, chamadas à ação, mensagens de erro), erre no lado do contraste mais alto. Gerenciamento de cor e diferenças entre dispositivos afetam como os usuários percebem o contraste. Uma cor sRGB em uma tela de gamut amplo (P3 ou Adobe RGB) pode aparecer ligeiramente diferente do que o pretendido. Monitores baratos de painel TN exibem cores de forma diferente do que telas IPS ou OLED. Configurações de brilho da tela mudam o contraste percebido. Filtros de luz azul e modo noturno tingem a tela de quente, reduzindo o contraste percebido de cores frias. Nenhum desses fatores muda a proporção calculada do WCAG, mas eles afetam a experiência visual real. Testar em múltiplos dispositivos e em múltiplas condições detecta problemas que cálculos matemáticos perdem. Os requisitos de contraste para texto incorporado em imagens são os mesmos do texto ao vivo. Se a sua imagem de destaque contém texto embutido no arquivo de imagem (não texto HTML), esse texto ainda precisa atender aos requisitos de contraste do WCAG. A diferença é que você não pode ajustar o texto da imagem com CSS, então o contraste deve ser verificado na ferramenta de edição de imagem antes da exportação. Imagens de pré-visualização de redes sociais (og:image) costumam conter texto que deve ser legível, embora elas não sejam formalmente cobertas pelo WCAG já que aparecem em plataformas de terceiros. O contraste na tipografia vai além das cores de primeiro plano e fundo. O contraste percebido do texto depende do peso da fonte, tamanho da fonte, espaçamento entre letras e altura de linha. Fontes finas (peso 300 e abaixo) precisam de proporções de contraste mais altas do que o mesmo texto em peso regular ou negrito porque os traços mais finos são mais difíceis de distinguir do fundo. A especificação do WCAG não considera o peso da fonte em seus limites (apenas tamanho), então uma proporção tecnicamente aprovada ainda pode produzir texto ilegível se a fonte for muito fina. Para corpo de texto, use peso regular (400) ou médio (500) no mínimo. Reserve pesos light e thin para títulos grandes onde o tamanho compensa a visibilidade reduzida do traço. A auditoria sistemática de contraste em um site grande exige uma combinação de ferramentas automatizadas e revisão manual. Execute varreduras automatizadas (axe-core, Lighthouse) para detectar os problemas mais fáceis: cores fixas que falham nas proporções. Depois revise manualmente conteúdo dinâmico, áreas de conteúdo gerado pelo usuário, estados interativos (hover, focus, active, disabled), mensagens de erro e sucesso, texto de dica e qualquer área onde a cor é determinada em tempo de execução. Crie um cronograma recorrente de auditoria: trimestral para sites grandes, mensal durante desenvolvimento ativo. Acompanhe o número de problemas de contraste ao longo do tempo para medir o progresso. A ferramenta de verificação de contraste permite que você insira quaisquer duas cores e veja instantaneamente a proporção de contraste, o status de aprovação/reprovação do WCAG AA e AAA tanto para texto normal quanto grande e uma pré-visualização visual da combinação. Use-a durante a fase de design para validar escolhas de cores antes que cheguem ao desenvolvimento, durante a revisão de código para verificar se as cores implementadas correspondem ao design e durante auditorias de acessibilidade para identificar e corrigir problemas existentes. A ferramenta aceita valores hex, RGB e HSL e mostra a luminância calculada para cada cor ao lado da proporção.
Perguntas frequentes
Qual proporção de contraste é necessária para WCAG AA?
O WCAG AA exige uma proporção mínima de contraste de 4,5:1 para texto normal e 3:1 para texto grande (18px+ ou 14px+ em negrito).
Qual a diferença entre AA e AAA?
O AAA é mais rigoroso: 7:1 para texto normal e 4,5:1 para texto grande. O AA é o padrão mínimo recomendado.
