Verificador de Contraste WCAG
Verifique a taxa de contraste entre texto e fundo segundo os padrões WCAG AA e AAA — com pré-visualização ao vivo em texto normal e grande.
1.145 visualizações
A rápida raposa marrom salta sobre o cão preguiçoso
Exemplo de texto grande 24px
Como a Taxa É Calculada
A fórmula do WCAG é (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 a da mais escura — assim o resultado sempre fica entre 1:1 (cores idênticas) e 21:1 (preto puro sobre branco puro). A luminância relativa não é uma média simples dos canais RGB; é uma soma ponderada perceptualmente, L = 0,2126R + 0,7152G + 0,0722B, aplicada depois que cada canal é linearizado revertendo a curva gama sRGB (valores abaixo de 0,03928 são divididos por 12,92, os demais passam por ((c+0,055)/1,055)^2,4). O verde contribui cerca de dez vezes mais para o brilho percebido do que o azul, de modo que trocar os canais verde e azul de uma cor pode mudar drasticamente seu peso visível mesmo mantendo o mesmo brilho bruto.
Um exemplo concreto: o cinza médio puro #767676 sobre um fundo branco resulta em exatamente 4,54:1 — pouco acima do limite AA do WCAG de 4,5:1 para texto normal. Escureça-o um passo para #757575 e cai para 4,48:1, reprovando no AA. É por isso que tantos designs cinza-sobre-branco reprovam silenciosamente em uma auditoria: a diferença visual entre um cinza aprovado e um reprovado é um único passo de RGB, invisível para a maioria dos olhos mas muito visível para um scanner automatizado ou para um usuário com baixa visão sob luz do dia intensa.
O Que Você Deve Saber
O WCAG 2.1 define dois limites AA dependendo do tamanho do texto: 4,5:1 para texto normal, e um relaxado 3:1 para texto grande — definido como 18pt (24px) peso regular ou 14pt (18,7px) negrito e acima, já que traços maiores permanecem legíveis com menos contraste. O nível AAA, mais rigoroso, exige 7:1 no texto normal e 4,5:1 no texto grande. Elementos de interface não textuais, como ícones, bordas de campos e indicadores de foco, têm sua própria exigência de 3:1 sob o critério de sucesso 1.4.11 do WCAG 2.1, medida contra a cor de fundo adjacente.
Esses números não são arbitrários — vêm de pesquisas sobre legibilidade para usuários com baixa visão, daltonismo e perda de sensibilidade a contraste relacionada à idade, e servem também como referência legal em regulamentações de acessibilidade como a ADA e a EN 301 549, o padrão europeu por trás do European Accessibility Act. Uma falha de contraste é um dos problemas mais comumente citados em auditorias automatizadas de acessibilidade web, razão pela qual muitos sistemas de design incorporam um piso de 4,5:1 diretamente em seus tokens de cor em vez de deixar a verificação a cargo de cada designer.
Perguntas Frequentes
Trocar o texto pelo fundo muda a taxa?
Não — a fórmula sempre coloca a cor mais clara no topo, portanto a taxa é simétrica. A legibilidade ainda pode diferir subjetivamente (halo de texto claro sobre fundo escuro), mas a pontuação do WCAG é idêntica.
O que conta como texto grande?
24 px (18 pt) regular ou cerca de 18,7 px (14 pt) em negrito e maior. O texto grande só precisa de 3:1 no AA porque glifos maiores permanecem legíveis com contraste mais baixo.
Minha cor de marca reprova — e agora?
Mantenha-a para decoração e desloque o uso em texto para mais escuro ou mais claro até que ela passe; uma escala de tons/sombras ajuda. Textos de espaço reservado (placeholder) e estados desabilitados são isentos da exigência, mas vale mantê-los em um nível razoável.
Por que usar luminância corrigida por gama em vez de uma média RGB simples?
Porque o brilho percebido não é linear nem igual entre canais — fazer a média do RGB bruto trataria o amarelo vivo (#ffff00) e o azul médio (#0000ff) como tendo aproximadamente o mesmo brilho, quando na verdade o amarelo parece muito mais brilhante para o olho. A etapa de decodificação gama corrige a forma como o sRGB comprime valores em vez de armazenar luz linear, e os pesos 0,2126/0,7152/0,0722 refletem a maior sensibilidade do olho ao verde, depois ao vermelho, depois ao azul. Pule qualquer uma dessas etapas e os números deixam de corresponder à forma como o contraste realmente aparece.
Uma taxa aprovada garante que as cores funcionem para usuários daltônicos?
Não totalmente — a taxa mede apenas a diferença de luminância, não a diferença de matiz, então duas cores podem passar de 4,5:1 e ainda ser difíceis de distinguir para alguém com deuteranopia se a principal diferença entre elas for de matiz em vez de claridade, como ocorre com alguns pares vermelho/verde de brilho equivalente. Uma alta taxa de contraste é necessária, mas não suficiente, para a acessibilidade a daltônicos; combiná-la com uma diferença de claridade ou uma pista não relacionada à cor, como um ícone ou sublinhado, cobre ambos os casos.
Ferramentas Semelhantes
Reportar um Problema
Verificador de Contraste WCAG
Comentários
Ainda não há comentários — seja o primeiro a escrever um!