Verificador de Contraste de Cores para Acessibilidade WCAG

O que é um verificador de contraste de cores

Um verificador de contraste de cores compara duas cores — a do texto e a do fundo — e devolve um único número: a razão de contraste entre elas. Essa razão diz se a combinação é legível o bastante para passar nos critérios de acessibilidade da WCAG (Web Content Accessibility Guidelines), a referência internacional usada por quem audita sites, aplicativos e sistemas de design. Se você chegou aqui buscando algo como “testar contraste de cores” ou “contraste de cores acessibilidade WCAG”, é exatamente isso que esta página faz: você escolhe as duas cores e recebe na hora a razão de contraste, o veredito de AA e AAA, e um número complementar do APCA, o método candidato à próxima geração da norma.

O cálculo por trás da razão de contraste é (L1 + 0,05) / (L2 + 0,05), sempre a luminância mais clara dividida pela mais escura, resultando em algo entre 1:1 (nenhum contraste) e 21:1 (preto puro contra branco puro). Luminância relativa não é a mesma coisa que claridade percebida: ela pesa os canais de cor de forma desigual — 0,2126 para o vermelho, 0,7152 para o verde e apenas 0,0722 para o azul, ou seja, o verde pesa quase dez vezes o azul. É por isso que o azul puro (#0000FF) e o amarelo puro (#FFFF00), que têm exatamente a mesma claridade em HSL (50%), produzem contrastes radicalmente diferentes: branco sobre aquele azul chega a 8,59:1 e passa em AA, enquanto branco sobre o amarelo fica em 1,07:1, praticamente invisível.

Esta ferramenta faz tudo isso instantaneamente, sem enviar nenhuma cor para servidor algum: você digita ou escolhe as duas cores e vê ao vivo a pré-visualização, a razão de contraste, as cinco checagens da WCAG e o painel do APCA — incluindo, quando o texto reprova, sugestões da cor mais próxima que passaria. Um detalhe que a maioria dos verificadores erra é o arredondamento: #118A11 sobre branco dá 4,4994:1, abaixo do mínimo de AA, mas uma ferramenta que arredonda para duas casas decimais mostra “4,50” com um tique verde, escondendo uma reprovação real. Aqui o número exibido é sempre arredondado para baixo, e o veredito usa o valor exato, sem arredondar antes de decidir.

Como usar o verificador de contraste

1. Defina a cor do texto. Digite o hexadecimal no campo Cor do texto — aceita 3, 6 ou 8 dígitos, com ou sem # — ou clique no quadradinho de cor ao lado para abrir o seletor do sistema operacional. Um hexadecimal de 8 dígitos também define a opacidade do texto.
2. Defina a cor de fundo, ou inverta as duas de uma vez. O campo Cor de fundo funciona do mesmo jeito, com o mesmo par de controles: hexadecimal digitado ou seletor nativo de cor. Se for mais fácil pensar ao contrário, use o botão de trocar entre os dois campos para inverter texto e fundo em um clique.
3. Leia o resultado. O painel de pré-visualização mostra a mesma frase de exemplo em três tamanhos — 16px normal, 18,5px em negrito e 24px normal — mais uma caixa com borda representando um componente de interface, tudo pintado com a cor de fundo escolhida. Logo abaixo aparecem a razão de contraste, as cinco linhas de aprovação ou reprovação da WCAG e o painel do APCA com o valor de Lc. Se o texto normal reprovar em AA, chips com a versão mais escura e a mais clara que atingem 4,5:1 aparecem ao lado — clique em qualquer uma delas para aplicá-la na hora.

O que os níveis de AA e AAA realmente significam

A WCAG define dois níveis de conformidade para contraste: AA, o mínimo normalmente exigido em contratos, editais e auditorias de acessibilidade, e AAA, um padrão mais rígido para conteúdo que precisa ser lido por mais pessoas, em mais condições de tela e de luz. Para texto normal, AA pede pelo menos 4,5:1 (critério de sucesso 1.4.3) e AAA pede 7:1 (critério 1.4.6) — uma diferença e tanto, já que 7:1 elimina praticamente qualquer cinza médio contra um fundo branco ou preto.

Os dois níveis relaxam a exigência para texto grande, que a WCAG define como no mínimo 18 pontos, ou 14 pontos em negrito. O documento de apoio Understanding WCAG converte 1 ponto em 1,333px, o que dá aproximadamente 24px para texto grande normal e 18,5px para negrito — os mesmos dois tamanhos que esta ferramenta usa na pré-visualização, ao lado do texto normal de 16px. Nesses tamanhos, AA cai para 3:1 e AAA para 4,5:1; a maioria dos verificadores por aí nem chega a explicar essa conversão. Há ainda um terceiro critério, o 1.4.11, que não é sobre texto: exige 3:1 para bordas de campo, ícones informativos e outros componentes de interface e elementos gráficos que precisam se distinguir do fundo.

As margens desses limiares são mais estreitas do que parecem. Contra um fundo branco, #767676 é o cinza mais claro que ainda passa em AA normal, com 4,54:1 — um tom só mais claro, #777777, já cai para 4,47:1 e reprova. Contra preto, #757575 é o cinza mais escuro que passa, com 4,55:1. Como essas fronteiras caem em valores de byte vizinhos, só existem dois cinzas — #757575 e #767676 — que passam em AA tanto contra preto quanto contra branco. (Para quem gosta de detalhe: a WCAG trocou, em maio de 2021, a constante usada na linearização de sRGB, de 0,03928 para 0,04045 — mas em cores de 8 bits isso não muda nada na prática, porque 10/255 fica abaixo dos dois valores e 11/255 acima dos dois, nas 256 possibilidades de canal.)

Onde WCAG e APCA discordam, e o que esta ferramenta não sabe dizer

O exemplo mais claro dessa divergência é um único cinza: #888888. Contra um fundo branco, ele mede 3,54:1 — reprova em AA. Mas o APCA dá a esse mesmo par Lc 63,1, o suficiente para superar o nível Lc 60. Inverta o fundo: o mesmo #888888 contra preto mede 5,92:1, uma aprovação limpa em AA — só que agora o APCA dá Lc -38,6, que alcança apenas o piso absoluto de Lc 30, o mínimo que o APCA aceita para qualquer texto. A mesma cor, os dois fundos, e os dois padrões trocam de veredito entre si.

O problema fica mais sério perto do preto. Entre as 65.536 combinações possíveis de cinza sobre cinza, 6.407 passam em AA da WCAG mas ficam abaixo do Lc 60 do APCA — o pior caso é #757575 sobre #020202, que mede 4,50:1, uma aprovação de AA por pouco, mas apenas Lc 29,6, abaixo até do piso absoluto de Lc 30. É exatamente esse tipo de superestimação perto do preto que o APCA foi criado para corrigir, e é por isso que a razão de contraste da WCAG 2 é uma referência ruim para quem projeta modo escuro. O oposto — AA reprovar quando o APCA aprovaria com folga — é raro: só 11 pares de cinza reprovam em AA e ainda superam o Lc 75 do APCA para texto corrido; o mais forte é branco sobre #777777, 4,47:1 (reprovado), mas Lc 76,6. Parte dessa assimetria vem do próprio desenho do APCA: preto sobre branco mede Lc 106,04, branco sobre preto mede Lc -107,88 — não são espelhados, e a diferença é proposital. Já a razão da WCAG 2 é perfeitamente simétrica (conferimos isso em mais de 4.000 pares: trocar texto e fundo nunca muda o número), então ela simplesmente não distingue texto claro sobre escuro de texto escuro sobre claro.

Dito isso, nem a WCAG nem o APCA devem ser tratados como a palavra final. A WCAG 3 e o próprio APCA ainda são propostas em desenvolvimento — nenhum dos dois é uma exigência legal em lugar nenhum hoje. O que a legislação aponta, no Brasil e na maioria dos lugares, é a WCAG 2 nível AA: 4,5:1 para texto normal. Se o que está em jogo é uma auditoria, uma licitação ou uma cláusula de acessibilidade em contrato — inclusive à luz da Lei Brasileira de Inclusão e das diretrizes que órgãos públicos vêm adotando, historicamente com base no eMAG e cada vez mais alinhadas à própria WCAG 2 AA — é o número de AA que conta; trate o APCA como informação extra, não como certificado. Além disso, os dois métodos comparam duas cores chapadas: texto sobre foto, gradiente ou uma sobreposição semitransparente tem um contraste diferente em cada pixel, e nenhum número único descreve isso. Nenhum dos dois sabe nada sobre a fonte usada — a WCAG 2 só reconhece peso através da regra de negrito em texto grande, então uma fonte finíssima de peso 300 e uma bem pesada de peso 900, no mesmo tamanho, recebem exatamente o mesmo veredito. Os dois são definidos em sRGB, então uma cor de gamut largo em Display P3 fica fora do que qualquer um dos padrões descreve. Os dois algoritmos também só valem para cores opacas: texto translúcido precisa ser composto com o fundo antes de qualquer número fazer sentido — preto a 60% de opacidade sobre branco vira #666666 na prática, ou seja, 5,74:1, não os 21:1 que o preto puro sugeriria. Esta ferramenta já faz essa composição para o texto e mostra a cor resultante, mas não faz o mesmo para um fundo translúcido: nesse caso, some o fundo com o que está atrás dele antes de testar aqui. E, por fim, passar no teste não é o mesmo que ser confortável de ler: comprimento de linha, espaçamento, brilho de tela e luz ambiente são todos reais, e nenhum dos dois modelos leva isso em conta.

Por que essa ferramenta é gratuita

Esta ferramenta roda inteiramente no seu navegador: o cálculo da razão de contraste, o veredito de AA e AAA e o número do APCA são só aritmética sobre três números por cor, e qualquer computador ou celular resolve isso em uma fração de milissegundo. Nenhuma cor é enviada para um servidor, não existe fila de processamento, e não há motivo nenhum para cobrar por isso.

Por isso não há conta para criar, marca d’água para remover, nem plano pago escondido atrás de um limite de uso. Você abre a página, testa quantas combinações de cor quiser, copia os valores que precisar e fecha a aba — sem deixar nenhum rastro do outro lado.